このページの本文へ

サンプルで学ぶjQuery Mobileまとめ(中編) (3/4)

2011年08月04日 11時00分更新

文●西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

ナビゲーションバーの追加 data-role属性「navbar」

 data-role属性「navbar」を利用すると、ヘッダーやフッターにナビゲーションバーを追加できます。サンプル33ではヘッダーに、サンプル34ではフッターにナビゲーションバーを表示しています。ナビゲーションバーに表示するボタンは、data-role属性「navbar」を付けた要素の内側にリスト(ul/li要素)で記述します。

サンプル33[HTML]


<div data-role="header">
  <h1>ページ1</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#page2">One</a></li>
      <li><a href="#page2">Two</a></li>
    </ul>
  </div>
</div>


<画像>32.jpg

ヘッダーに追加したナビゲーション

サンプル34[HTML]


<div data-role="footer">
  <div data-role="navbar">
    <ul>
      <li><a href="#page2">One</a></li>
      <li><a href="#page2">Two</a></li>
    </ul>
  </div>
</div>


<画像>33.jpg

フッターに追加したナビゲーション

 ナビゲーションバーはボタンの数(li要素の数)で均等に分割され、数が増えるにつれてボタンは小さくなります。

240

ボタンの数が増えると1つ1つのボタンのサイズは小さくなる

 ボタンの数(li要素の数)が6つ以上になると1行に2列ずつ、複数行に分割して表示されます。

ボタンの数が6つ以上になると行が拡張される

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています