最新のWeb開発のチュートリアル
 

jQuery Mobileボタンアイコン


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"アイコン位置の値として:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext" >Search</a>
»それを自分で試してみてください

サークルを削除します

デフォルトでは、すべてのアイコンは、彼らの周りの灰色の円(ディスク)を持っています。 サークルを削除するには、追加"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"クラスは、コンテナに追加されます。