この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
jQuery Mobileではフレームワークとしてボタンのアイコンが15個のアイコンが用意されています。殆どこれでだけ足りるのではないでしょうか。今回はアイコンの使い方について紹介します。
使ってみる
アイコンはdata-icon="{アイコンの名前}"で指定します。簡単ですね。
<a href="#" data-role="button" data-icon="arrow-l">arrow-l</a>この例では、左向き矢印のアイコンを表示できます。また、data-iconpos="{left,right,top,buttom,notext}"でアイコンの表示位置を指定できます。notextの場合はアイコン画像だけが表示されます。
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">arrow-l</a>サンプル
アイコン15個(ボタンのラベルにアイコン名を入れました)と表示位置5個のサンプルを作りました。ページ毎にテーマを変えています。各テーマの雰囲気と共に参考にしてみてください。