アイコンの追加

jQuery Mobileでは、モバイルアプリでよく使うと思われるアイコンのセットを用意しています。ダウンロードサイズを最小化するために、アイコンは1枚の画像をスプライトで使います。白いアイコンが黒い円に自動的に半透明になって重ねられ、背景と上手く組み合わせられます。

アイコンをボタン上に表示させるには data-icon 属性をアンカーに指定してやります。たとえば、次のようにします。

Delete

Delete

アイコンセット

指定できるアイコンは、次のようなものがあります。

Left arrow – data-icon=“arrow-l”

My button

Right arrow – data-icon=“arrow-r”

My button

Up arrow – data-icon=“arrow-u”

My button

Down arrow – data-icon=“arrow-d”

My button

Delete – data-icon=“delete”

My button

Plus – data-icon=“plus”

My button

Minus – data-icon=“minus”

My button

Check – data-icon=“check”

My button

Gear – data-icon=“gear”

My button

Refresh – data-icon=“refresh”

My button

Forward – data-icon=“forward”

My button

Back – data-icon=“back”

My button

Grid – data-icon=“grid”

My button

Star – data-icon=“star”

My button

Alert – data-icon=“alert”

My button

Info – data-icon=“info”

My button

Home – data-icon=“home”

My button

Search – data-icon=“search”

My button

アイコンの位置

初期状態では、アイコンはボタンの左側に表示されます。

Delete

これは data-iconpos 属性を指定することで、テキストの右側(right)、上(top)、下(bottom)にも表示させることが可能です。

Delete

Delete

上に表示させるには data-iconpos=“top” とします。

Delete

下に表示させるには data-iconpos=“bottom” とします。

Delete

この data-iconpos 属性に notext を指定することで、アイコンだけのボタンを作ることも出来ます。リンクのテキストは画面上に見えなくなりますが、リンクの title 属性に自動的に設定されるので、スクリーンリーダーやツールチップで使われます。

Delete

Delete

アイコンとテーマ

このように、白いアイコンを黒い円と組み合わせる方法は、jQuery Mobileのテーマシステムとうまくマッチします。次の例は、同じアイコンセットを異なるスウォッチに適用したものです。

スウォッチ “a”

My button My button My button My button My button My button My button My button My button My button My button My button My button My button My button My button My button My button

スウォッチ “b”

My button My button My button My button My button My button My button My button My button My button My button My button My button My button My button My button My button My button

スウォッチ “c”

My button My button My button My button My button My button My button My button My button My button My button My button My button My button My button My button My button My button