jQueryモバイルボタンアイコン
jQuery Mobile は、ボタンをより魅力的に見せるアイコンのセットを提供します。
jQuery Mobile ボタンにアイコンを追加します
ui-icon クラスを使用してボタンにアイコンを追加し、指定されたクラスを使用してボタンの位置を設定できます。
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
注: リストやフォームのボタンなど、他の方法のボタンでは、data-icon 属性を使用する必要があります。次の章で詳しく紹介します。
以下に、jQuery Mobile が提供する利用可能なアイコンの一部をリストします。
| ボタンクラス | 説明 | ボタン | インスタンス | |
|---|---|---|---|---|
| ui-icon-arrow-l | 左矢印 |  | 试||
| R | 右矢印 |  | ||
| Ui -ICon-INFO | 情報 | |||
 | itit | |||
| ui-icon-delete | delete | tryittryit | ui-icon-audio | |
| 試してみる |  ui-icon-alert | 警告 | ||
| 試してみる-Ui-ICON-GRID | グリッド すべての jQuery Mobile ボタン アイコンの完全なリファレンス マニュアルについては、jQuery Mobile アイコン リファレンス マニュアルを参照してください。 アイコンの配置アイコンをボタン上のどこに配置するか (上、右、下、左) 指定することもできます。 ui-btn-icon 属性を使用して場所を指定してください: アイコンの場所:インスタンス<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">顶部</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">右侧</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">底部</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">左侧</a> インスタンスの実行» 「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
アイコンのみを表示しますアイコンのみを表示したい場合は、「notext」を使用できます: インスタンス<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">搜索</a> インスタンスの実行» 「インスタンスの実行」ボタンをクリックして、オンライン インスタンスを表示します 円を削除デフォルトでは、すべてのアイコンには灰色の円が付いています。必要ない場合は、要素で「ui-nodisc-icon」クラスを使用できます: Instance<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">使用圆圈 (默认)</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">去掉圆圈</a> Run Instance» [Run Instance] ボタンをクリックしてオンラインで表示します。例 黒、白のボタンデフォルトでは、すべてのアイコンは白です。 アイコンの色を黒に変更する必要がある場合は、要素に「ui-alt-icon」を追加します: インスタンス<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">白色</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">黑色</a> インスタンスの実行» 「インスタンスの実行」ボタンをクリックして、オンラインインスタンス さらにインスタンスがコンテナに追加されました
「ui-nodisc-icon」クラス コンテナに追加
「ui-alt-icon」クラス |
