jQueryのモバイルは、あなたのボタンがより望ましい見えるようになりますアイコンのセットを提供します。
jQueryのモバイルボタンへのアイコンの追加
使用し、あなたのボタンにアイコンを追加するにはui-iconクラスを、アイコンの位置クラスにアイコンを配置(ui-btn-icon - pos )
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left" >Search</a>
注:他のボタンの場合は、リストビューやフォームのボタンのように、あなたは、データ-icon属性を使用する必要があります。 これは、後の章で説明します。
我々はjQueryのモバイルが提供するいくつかの利用可能なアイコンがリストされている下:
Iconクラス | 説明 | アイコン | 例 |
---|---|---|---|
ui-icon-arrow-l | 左矢印 | それを試してみてください | |
ui-icon-arrow-r | 右矢印 | それを試してみてください | |
ui-icon-info | 情報 | それを試してみてください | |
ui-icon-delete | 削除 | それを試してみてください | |
ui-icon-back | バック | それを試してみてください | |
ui-icon-audio | スピーカー | それを試してみてください | |
ui-icon-lock | 南京錠 | それを試してみてください | |
ui-icon-search | サーチ | それを試してみてください | |
ui-icon-alert | アラート | それを試してみてください | |
ui-icon-grid | グリッド | それを試してみてください | |
ui-icon-home | ホーム | それを試してみてください |
すべてのjQueryモバイルのボタンアイコンの完全なリファレンスについては、当社をご覧くださいjQueryのモバイルアイコンのリファレンス 。
位置決めのアイコン
:あなたは、アイコンがボタン内に配置されるべき場所のための4つの値のいずれかを指定することができますtop, right, bottomまたはleft 。
使用ui-btn-icon位置を指定するクラス:
リンクボタンのアイコンの位置
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top" >Top</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-right" >Right</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-bottom" >Bottom</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-left" >Left</a>
»それを自分で試してみてください あなたはリンクボタンのアイコンの位置を指定しない場合は、アイコンは表示されません。
アイコンだけを表示します
のみ使用し、アイコンを表示するには、 "notext"アイコン位置の値として:
サークルを削除します
デフォルトでは、すべてのアイコンは、彼らの周りの灰色の円(ディスク)を持っています。 サークルを削除するには、追加"ui-nodisc-icon"要素またはそのコンテナにクラスを:
例
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-nodisc-icon" >Without circle</a>
»それを自分で試してみてください ブラックまたはホワイトのアイコン
デフォルトでは、すべてのアイコンは白です。 黒にアイコンの色を変更するには、追加"ui-alt-icon"要素またはそのコンテナに:
例
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-alt-icon" >Black</a>
»それを自分で試してみてください その他の例
追加"ui-nodisc-icon"コンテナにクラスを
例"ui-nodisc-icon"クラスは、コンテナに追加されます。
追加"ui-alt-icon"コンテナにクラスを
例"ui-alt-icon"クラスは、コンテナに追加されます。