アイコンの追加
jQuery Mobileでは、モバイルアプリでよく使うと思われるアイコンのセットを用意しています。ダウンロードサイズを最小化するために、アイコンは1枚の画像をスプライトで使います。白いアイコンが黒い円に自動的に半透明になって重ねられ、背景と上手く組み合わせられます。
アイコンをボタン上に表示させるには data-icon 属性をアンカーに指定してやります。たとえば、次のようにします。
Delete
アイコンセット
指定できるアイコンは、次のようなものがあります。
Left arrow – data-icon=“arrow-l”
My buttonRight arrow – data-icon=“arrow-r”
My buttonUp arrow – data-icon=“arrow-u”
My buttonDown arrow – data-icon=“arrow-d”
My buttonDelete – data-icon=“delete”
My buttonPlus – data-icon=“plus”
My buttonMinus – data-icon=“minus”
My buttonCheck – data-icon=“check”
My buttonGear – data-icon=“gear”
My buttonRefresh – data-icon=“refresh”
My buttonForward – data-icon=“forward”
My buttonBack – data-icon=“back”
My buttonGrid – data-icon=“grid”
My buttonStar – data-icon=“star”
My buttonAlert – data-icon=“alert”
My buttonInfo – data-icon=“info”
My buttonHome – data-icon=“home”
My buttonSearch – data-icon=“search”
My buttonアイコンの位置
初期状態では、アイコンはボタンの左側に表示されます。
これは data-iconpos 属性を指定することで、テキストの右側(right)、上(top)、下(bottom)にも表示させることが可能です。
Delete
上に表示させるには data-iconpos=“top” とします。
下に表示させるには data-iconpos=“bottom” とします。
この data-iconpos 属性に notext を指定することで、アイコンだけのボタンを作ることも出来ます。リンクのテキストは画面上に見えなくなりますが、リンクの title 属性に自動的に設定されるので、スクリーンリーダーやツールチップで使われます。
Delete
アイコンとテーマ
このように、白いアイコンを黒い円と組み合わせる方法は、jQuery Mobileのテーマシステムとうまくマッチします。次の例は、同じアイコンセットを異なるスウォッチに適用したものです。
スウォッチ “a”
スウォッチ “b”
スウォッチ “c”