jQuery Mobile アイコンをボタンに表示する
公開日：2014年10月10日
最終更新日：2014年11月8日
jQuery Mobile ではバージョン 1.4 時点で 50種類のアイコンが提供されています。それらのアイコンは簡単な指定でボタンに表示できるようになっています。この記事ではボタンにアイコンを表示する方法を解説します。
«次の特集記事» jQuery Mobile ヘッダーを設置する
«前の特集記事» jQuery Mobile ボタンを設置する
【コンテンツ】
【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5
アイコンリスト
記事執筆時点で用意されているアイコンです。
| action | alert | arrow-d | |||
| arrow-d-l | arrow-d-r | arrow-l | |||
| arrow-r | arrow-u | arrow-u-l | |||
| arrow-u-r | audio | back | |||
| bars | bullets | calendar | |||
| camera | carat-d | carat-l | |||
| carat-r | carat-u | check | |||
| clock | cloud | comment | |||
| delete | edit | eye | |||
| forbidden | forward | gear | |||
| grid | heart | home | |||
| info | location | lock | |||
| minus | navigation | ||||
| phone | plus | power | |||
| recycle | refresh | search | |||
| shop | star | tag | |||
| user | video |
使用するクラス
a要素、button要素のボタンにアイコンを表示するにはクラスを使います。
| クラス | 説明 |
|---|---|
| ui-icon-[アイコン名] | アイコンの種類を指定する |
| ui-btn-icon-top | アイコンをテキストの上に表示する |
| ui-btn-icon-right | アイコンをテキストの右に表示する |
| ui-btn-icon-bottom | アイコンをテキストの下に表示する |
| ui-btn-icon-left | アイコンをテキストの左に表示する |
| ui-btn-icon-notext | テキストは表示せずアイコンだけのボタンにする |
| ui-nodisc-icon | アイコンの背景の影を消す |
| ui-alt-icon | アイコン色を黒にする |
使用するデータ属性
フォームボタン(input要素)にアイコンを表示するにはデータ属性を使います。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-icon | アイコンリスト参照 | アイコンの種類を指定する |
| data-iconpos | left | right | top | bottom | notext | アイコンの表示位置を指定する notextはアイコンだけのボタン |
アイコンの指定方法
アイコンを表示するには、「アイコンの種類」と「表示位置」を指定します。
アイコンの種類を指定する
a要素、button要素のボタンは、ui-icon-[アイコン名] クラスで指定します。
フォームボタンはデータ属性を使い、「data-icon="アイコン名"」と指定します。
アイコンの表示位置を指定する
a要素、button要素のボタンは、ui-btn-icon-[top|right|bottom|left|] クラスで指定します。
フォームボタンはデータ属性を使い、「data-iconpos="top|right|bottom|left"」と指定します。データ属性を省略した場合のデフォルトは "left" です。
以下は記述例です。
|
1 2 3 4 5 6 7 8 9 10 |
<div role="main" class="ui-content"> <input type="button" value="メニュー" data-icon="bullets" data-iconpos="left"> <input type="button" value="削除" data-icon="delete" data-iconpos="top"> <input type="button" value="ユーザー" data-icon="user" data-iconpos="right"> <input type="button" value="設定" data-icon="gear" data-iconpos="bottom"> <a href="#" class="ui-btn ui-icon-bullets ui-btn-icon-left ui-btn-inline ui-mini">メニュー</a> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top ui-btn-inline ui-mini">削除</a> <a href="#" class="ui-btn ui-icon-user ui-btn-icon-right ui-btn-inline ui-mini">ユーザー</a> <a href="#" class="ui-btn ui-icon-gear ui-btn-icon-bottom ui-btn-inline ui-mini">設定</a> </div> |
オプション指定
テキストを表示せずアイコンだけを表示する
a要素、button要素のボタンは、ui-btn-icon-notext クラスをつけるとアイコンだけのボタンになります。枠は正方形になりますが、円にしたければ ui-corner-all クラスをつけます。
フォームボタンは、「data-iconpos="notext"」と指定するとアイコンだけのボタンになります。枠は円になります。
|
1 2 3 4 5 |
<div role="main" class="ui-content"> <a href="#" class="ui-btn ui-icon-bullets ui-btn-icon-notext">メニュー</a> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">削除</a> <input type="button" value="ユーザー" data-icon="user" data-iconpos="notext"> </div> |
背景の影を消す
デフォルトでは背景に円形の影がつきます。
これを消すには、ui-nodisc-icon クラスをつけます。
アイコン色を黒にする
デフォルトではアイコン色は白になります。
これを黒にするには、ui-alt-icon クラスをつけます。
|
1 2 3 4 5 6 |
<div role="main" class="ui-content"> <a href="#" class="ui-btn ui-icon-gear ui-btn-icon-top">背景あり・白（デフォルト）</a> <a href="#" class="ui-btn ui-icon-gear ui-btn-icon-top ui-nodisc-icon">背景なし・白</a> <a href="#" class="ui-btn ui-icon-gear ui-btn-icon-top ui-alt-icon">背景あり・黒</a> <a href="#" class="ui-btn ui-icon-gear ui-btn-icon-top ui-nodisc-icon ui-alt-icon">背景なし・黒</a> </div> |
jQuery Mobile のアイコンは、CSSにdata URIを使ったSVG画像の埋め込みがされています。拡大してもボケませんし、パフォーマンスの点でも有利ですので積極的に使いましょう。
なお、ボタンとアイコンの指定はバージョン1.4からクラスによる指定に変更になっていますので、古いバージョンを使っている人は注意しましょう。
«次の特集記事» jQuery Mobile ヘッダーを設置する
«前の特集記事» jQuery Mobile ボタンを設置する
スポンサーリンク
