jQuery Mobile アイコンをボタンに表示する

jQuery Mobile ではバージョン 1.4 時点で 50種類のアイコンが提供されています。それらのアイコンは簡単な指定でボタンに表示できるようになっています。この記事ではボタンにアイコンを表示する方法を解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. アイコンリスト
  2. 使用するクラス
  3. 使用するデータ属性
  4. アイコンの指定方法
  5. オプション指定

【記事執筆時の環境】
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
mail 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" です。

以下は記述例です。

オプション指定

テキストを表示せずアイコンだけを表示する

a要素、button要素のボタンは、ui-btn-icon-notext クラスをつけるとアイコンだけのボタンになります。枠は正方形になりますが、円にしたければ ui-corner-all クラスをつけます。

フォームボタンは、「data-iconpos="notext"」と指定するとアイコンだけのボタンになります。枠は円になります。

背景の影を消す

デフォルトでは背景に円形の影がつきます。
これを消すには、ui-nodisc-icon クラスをつけます。

アイコン色を黒にする

デフォルトではアイコン色は白になります。
これを黒にするには、ui-alt-icon クラスをつけます。

jQuery Mobile のアイコンは、CSSにdata URIを使ったSVG画像の埋め込みがされています。拡大してもボケませんし、パフォーマンスの点でも有利ですので積極的に使いましょう。
なお、ボタンとアイコンの指定はバージョン1.4からクラスによる指定に変更になっていますので、古いバージョンを使っている人は注意しましょう。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ