このページの本文へ

DESIGN 西畑一馬のjQuery Mobileデザイン入門 ― 第6回

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

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要素の数)で均等に分割され、数が増えるにつれてボタンは小さくなります。

<画像>34.jpg
ボタンの数が増えると1つ1つのボタンのサイズは小さくなる

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

<画像>37.jpg
ボタンの数が6つ以上になると行が拡張される
Web Professionalトップページバナー

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

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く