jQueryのモバイルナビゲーションバー
ナビゲーションバーは、典型的には、ヘッダーまたはフッター内に、水平方向に整列されているリンクのグループから構成されています。
バーは内側に包まれたリンクの順不同リストとしてコード化され<div>持っている要素data-role="navbar"属性：
例
<div data-role="header">
<div data-role="navbar" >
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
»それを自分で試してみてください デフォルトでは、ナビゲーションバー内のリンクは、自動的にボタン（の必要がないに変わりますclass="ui-btn"またはdata-role="button" ）。
ボタンは、デフォルトでは、その内容と同じ幅です。 同じように、ボタンを分割する順不同リストを使用します。1ボタンは幅の100％を取り、2つのボタンなど、それぞれ50％、3ボタン33.3％を共有するあなたは、ナビゲーションバーで5つ以上のボタンを指定した場合は、それがラップします複数行（以下「その他の例」を参照してください）。
ナビゲーションボタンのアイコン
あなたのナビゲーションボタンにアイコンを追加するには、 データ-icon属性を使用します。
データアイコンは、「アイコン」の章で指定されたCSSクラスと同じ値を使用する属性。 唯一の違いは、代わりに指定するのでは、ということですclass="ui-icon- value " 、あなたがの属性を指定data-icon=" value " 。
| 属性値 | 説明 | アイコン |
|---|---|---|
| data-icon="home" | ホーム | |
| data-icon="arrow-r" | 右矢印 | |
| data-icon="search" | サーチ |
すべてのjQueryモバイルのボタンアイコンの完全なリファレンスについては、当社をご覧くださいjQueryのモバイルアイコンのリファレンス 。
位置決めのアイコン
ちょうどと同じように"ui-btn-icon- position " ：アイコンはナビゲーションボタン内に配置すべき場所（「アイコン」の章で指定された）クラス、あなたが選ぶことができるtop, right, bottomまたはleft 。
アイコンの位置は、ナビゲーションバーのコンテナに設定されている - 個々のボタンのリンクを配置することはできません。 使用するdata-iconpos位置を指定する属性を：
| 属性値 | 説明 | 例 |
|---|---|---|
| data-iconpos="top" | 一番上のアイコンの配置 | それを試してみてください |
| data-iconpos="right" | 右側のアイコンの整列 | それを試してみてください |
| data-iconpos="bottom" | ボトムアイコンの配置 | それを試してみてください |
| data-iconpos="left" | 左のアイコンの配置 | それを試してみてください |
デフォルトでは、ナビゲーションボタンのアイコンは、テキストの上に配置されている(data-iconpos="top")
アクティブボタン
ナビゲーションバー内のリンクをタップすると/クリック、それが選択（押下）を見ます。
リンクをタップすることなく、この外観を実現するために、使用するclass="ui-btn-active" ：
複数のページには、ユーザーがオンになっているページを表し、各ボタンを探して、「選択」をお勧めします。 これを行うには、追加するには"ui-state-persist"あなたのリンクに、クラスだけでなく、 "ui-btn-active"クラス：
その他の例
コンテンツでNavbars
どのように内部のナビゲーションバーを追加するdata-role="content" 。
フッターにNavbars
フッターの内側にナビゲーションバーを追加する方法。
以上の5つのボタン
ナビゲーションバーの10個のボタンのデモンストレーション