N-takデザインブログ

WEBで培った作品や技術を公開しています。

jQuery Mobile アイコンの設置方法をやってみた!

今回は jQuery Mobile のアイコンを簡単に変更する方法を記事にします。

まったく使ったことがないわけではなかったのですが、久しぶりにお客様プレゼン用に作る機会があり勉強しなおしてみました。

その時に、アイコンがテーマに沿ったものが無かったので勉強したことを纏めます。

 

button data-icon="***"

 

ボタン設置に使用する定義ですが、この***の部分は

jQuery Mobile であらかじめ定義されていて、全部で18種類あります。

 

ですが、先ほども述べたとおりテーマに沿ったアイコン・・・となると手詰まりになってしまいます。

 

jQuery Mobile でデフォルト定義されいるボタンの一覧です。

billboard-top100.net

 

icons.PNG

 

設定アイコン
data-icon="arrow-l" 左矢印
data-icon="arrow-r" 右矢印
data-icon="arrow-u" 上矢印
data-icon="arrow-d" 下矢印
data-icon="delete" ×印
data-icon="plus" +印
data-icon="minus" -印
data-icon="check" レ点
data-icon="gear" ギア
data-icon="refresh" 再読込
data-icon="forward" 前進
data-icon="back" 後退
data-icon="grid" グリッド
data-icon="star"
data-icon="alert" アラート
data-icon="info" びっくりマーク
data-icon="home"
data-icon="search" 虫眼鏡

 

それでは、さっそく変更してみましょう。

※予めjQuery Mobile は設置されている前提です。

設置がわからない場合は下記を参照してください。

jQuery Mobile 1.1.0 日本語リファレンス - Screw-Axis

 

1.画像は18x18ピクセルで準備します。ファイル形式はpngが望ましいです。

2.新規でCSSファイルを作るか影響のないCSSに下記を記述します。

ui-icon-contact※変更したいボタンの名前に変更 {

background: url( 格納場所/ファイル名.拡張子 ) 50% 50% no-repeat;

background-size:20px 20px;

-moz-border-radius: 0;

-webkit-border-radius: 0;

border-radius: 0;※pxで大きさの変更ができます。0にすることでアイコンが丸くなっています。

}

 

それでは見てみましょう。

ミニテスト、ヘルプ、ユーザー情報以外はオリジナルアイコンになります。

f:id:r4m0khksticiibypvp4k:20131002132226j:plain

 

 いかがだったでしょうか。

 ちょっとしたことが作業を遅らせる要因になったりしますからこういう機会があったことに感謝です。

以上です。