ナビゲーションバー
jQuery Mobileは極めて基本的なナビゲーションバー(navbar)のウィジェットを用意しています。これは、ヘッダやフッタなどのバーに5つまでのアイコン付きボタンを配する際などに便利です。
ナビゲーションバーは data-role=“navbar” 属性を持った順序無しリスト(ul)のリンクとして記述されます。リンクのひとつが選択状態になると、そのアンカーには class=“ui-btn-active” が追加されます。次のコードは、フッタに二つボタンを配置し、そのうち “One” の方をアクティブにしているものです。
- One
- Two
ナビゲーションバー上のボタンは、全体を等分した大きさになります。次の例は、ブラウザ全体の大きさにあわせてボタンサイズがその半分になります。
3つ目のボタンを追加すると、自動的に各ボタンは画面の1/3の大きさになります。
4つ目を足せば、当然ボタンは画面の1/4になります。
この手法で並べられるのは、5つが最大になります。
5つ以上のリンクを作ると、ナビゲーションバーは複数行に拡張されます。
1つにすると、単純に横幅いっぱいのボタンになります。
ヘッダ上のナビゲーションバー
ナビゲーションバーをページのトップに置きたい場合、ヘッダのタイトルやボタンはそのままに、ヘッダに追加することができます。単純に、ナビゲーションバーをヘッダブロックに追加するだけで、次のようなヘッダが作成されます。
フッタ上のナビゲーションバー
ページの最下部に、タブバーのようなイメージでナビゲーションバーを置きたい場合、シンプルに data-role=“footer” を指定したコンテナでナビゲーションバーを囲んでやります。
アイコンの設定
アイコンをナビゲーションバーに追加するには、各アンカーに data-icon 属性を指定してやります。設定可能な値については ボタンのアイコン を参照してください。デフォルトでは、アイコンはテキストの上に表示されます( data-iconpos=“top” )。次の例は、フッタに置かれたナビゲーションバーにアイコンを追加したものです。
アイコンの位置指定は、見栄えの一貫性面から各リンクにではなくナビゲーションバーのコンテナ要素に設定するのが良いでしょう。たとえば、アイコンをラベルの下に配置するには data-iconpos=“bottom” 属性をナビゲーションバーのコンテナ要素に追加します。
その結果、次のようになります。
アイコン表示位置は data-iconpos=“left” のようにも指定できます。
あるいは data-iconpos=“right” も可能です。
サードパーティ製アイコンの設定
用意されたもの以外でも、たとえば Glyphish が紹介するようなアイコンを自由に用いることが出来ます。そのためには、若干のスタイルや位置の設定が必要です。詳しくは、コードを参照してください。
なお、ここで使っているアイコンは Joseph Wain / glyphish.com によるもの。ライセンスは Creative Commons Attribution 3.0 United States License に基づいています。
ナビゲーションバーのテーマ
ナビゲーションバーも data-theme の指定によりテーマの色見本を自由に適用できます。ナビゲーションバーがヘッダやフッタに入れられた場合は、特別に指定しない限りツールバーのデフォルトスウォッチであるAを継承します。
ここで、親要素のスウォッチを自動的に継承したナビゲーションバーのバリエーションを2つ紹介します。これらの例では data-theme 属性を使う代わりに、body用のスウォッチ( ui-body-a )クラスを使っています。しかし、継承の動作は同様です。
ナビゲーションバーのアイテム単位でスウォッチを指定するには data-theme 属性をそれぞれのリンクに設定します。ナビゲーションバーのコンテナ要素にスウォッチを指定することは出来ないので、注意してください。
-
ツールバーの基本
-
ヘッダ
-
フッタ
- ナビゲーションバー
-
固定ポジションモード
-
フルスクリーン・ポジションモード
-
固定フッタ
-
ツールバーのテーマ
[PR] jQuery Mobileリファレンスが書籍になりました
森 直彦 (著)
2012年1月20日 発売
新品 ￥2,709