jQuery Mobile ナビゲーションバー

jQuery Mobile ナビゲーションバー

ナビゲーションバーは水平に並んだリンクのセットで構成されており、通常ヘッダーやフッターの内部に位置しています。

デフォルトでは、ナビゲーションバーのリンクは自動的にボタンに変換されます（data-role="button"は不要です）。

ナビゲーションバーを定義するためにdata-role="navbar"属性を使用してください：

例

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">ホーム</a></li>
      <li><a href="#anylink">ページ2</a></li>
      <li><a href="#anylink">検索</a></li>
    </ul>
  </div>
</div>

自分で試してみる

ヒント：ボタンの幅は、デフォルトでその内容と一致しています。ボタンを均等に分割するために無序列表を使用します：1つのボタンは100%の幅を占め、2つのボタンはそれぞれ50%の幅を共有し、3つのボタンは33.3%、その後も同様に続きます。ただし、ナビゲーションバーに5つ以上のボタンを設定している場合、それが複数の行に折り返されます（ページ下部の「もっと例」を参照してください）。

アクティブなボタン

ナビゲーションバーのリンクがクリックされたとき、選択された外観（押下）を取得します。

リンクをクリックせずにこの外観を実現する場合は、class="ui-btn-active"を使用してください：

例

<li><a href="#anylink" class="ui-btn-active">ホーム</a></li>

自分で試してみる

複数のページがある場合、各ボタンに「選択された」外観を設定する必要があるかもしれません。ユーザーがページを閲覧していることを示すために、これを行う場合、リンクに「ui-state-persist」クラスと「ui-btn-active」クラスを追加してください：

例

<li><a href="#anylink" class="ui-btn-active ui-state-persist">ホーム</a></li>

自分で試してみる

さらに多くの例

コンテンツ内のナビゲーションバー
data-role="content" 内にナビゲーションバーを追加する方法
フッターのナビゲーションバー
フッターにナビゲーションバーを追加する方法
ナビゲーションバー内のアイコンの位置
フッター内のナビゲーションバーにアイコンを配置する方法
5つ以上のボタン
ナビゲーションバー内の10つのボタンを表示しています。