Webデザイナーブログから学ぶホームページ制作

jQuery mobileでは数多くのアイコンが提供されており、簡単な指定で使えるようになっています。
jQuery mobileでは、簡単にボタンの指定が出来ますが、アイコンの指定やアイコン付きボタン等も指定が簡単です。
html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。

jQuery Mobileを利用してアイコン付きのボタンを配置する方法を解説します。

ボタンにアイコンを付与するには、「ui-icon-*****」スタイルクラスを利用しアイコンの種類を指定します。
また、「ui-btn-icon-*****」スタイルクラスを利用してアイコンの位置の指定を行います。

※フォームボタンの場合は「data-iconpos=”top|right|bottom|left”」と指定します。

<button class="ui-btn ui-icon-action ui-btn-icon-left">アイコンボタン（button要素）</button>
<a href="#" class="ui-btn ui-icon-action ui-btn-icon-left">アイコンボタン（a要素）</a>
<input type="button" value="アイコンボタン（submit要素）" data-icon="action" data-iconpos="left">;

<a href="#" class="ui-btn ui-icon-action ui-btn-icon-left">アイコンの配置を変更したボタン（左）</a>
<a href="#" class="ui-btn ui-icon-action ui-btn-icon-top">アイコンの配置を変更したボタン（上）</a>
<a href="#" class="ui-btn ui-icon-action ui-btn-icon-right">アイコンの配置を変更したボタン（右）</a>
<a href="#" class="ui-btn ui-icon-action ui-btn-icon-bottom">アイコンの配置を変更したボタン（下）</a>

<a href="#" class="ui-btn ui-icon-action ui-btn-icon-left ui-btn-inline ui-mini">横並びにしたボタン（左）</a>
<a href="#" class="ui-btn ui-icon-action ui-btn-icon-top ui-btn-inline ui-mini">横並びにしたボタン（上）</a>
<a href="#" class="ui-btn ui-icon-action ui-btn-icon-right ui-btn-inline ui-mini">横並びにしたボタン（右）</a>
<a href="#" class="ui-btn ui-icon-action ui-btn-icon-bottom ui-btn-inline ui-mini">横並びにしたボタン（下）</a>

実装サンプルを作りましたのでこちらでも確認してみてください。
ボタンサンプル

ボタンにアイコンを付与し、テキストを削除してアイコンのみのボタンにしたい場合は「ui-btn-icon-notext」スタイルクラスを指定すればアイコンのみのボタンの表示になります。
デフォルトの指定では、アイコンの枠が正方形になりますが、円にしたい場合は「ui-corner-all」クラスを指定すれば円型に表示されます。

<button class="ui-btn ui-icon-delete ui-btn-icon-notext">アイコンのみのボタン（button要素）</button>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext">アイコンのみのボタン（a要素）</a>
<input type="button" value="アイコンのみのボタン（submit要素）" data-icon="user" data-iconpos="notext">

<button class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">アイコンのみのを丸にしたボタン（button要素）</button>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">アイコンのみのを丸にしたボタン（a要素）</a>
<input type="button" value="アイコンのみのを丸にしたボタン（submit要素）" data-icon="user" data-iconpos="notext">

実装サンプルを作りましたのでこちらでも確認してみてください。
ボタンサンプル

アイコンボタンをしていするとデフォルトではアイコンの色が白抜きになっています。アイコンの色を黒にしたい場合は「ui-alt-icon」スタイルクラスを指定します。
また、背景を消したい場合は「ui-nodisc-icon」スタイルクラスを指定します。

<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>

実装サンプルを作りましたのでこちらでも確認してみてください。
ボタンサンプル

jQuery mobileで利用できるアイコン一覧をご紹介します。
ボタンサンプル

アイコンボタンの位置の変更や色の変更を行う際に利用するクラスと要素一覧をご紹介します。

クラスも指定要素も簡単に設置できるのが良いですね。
アイコンの設置やアイコン付きボタンはhtmlとcss作成ページだと少し手間や面倒がかかったりしますが、jQuery Mobileは要素を記述するだけで表示できるので簡単です。作業時間が短縮されますね。