jQuery Mobile ナビゲーションバーを設置する

jQuery Mobile のナビゲーションバーは、リスト内のアンカーリンクが自動的にボタンになりグリッドレイアウトで等間隔に並びます。アクティブボタンも自動で表示してくれますので、簡単な記述でページを切り替えるナビゲーションが実現できます。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. ナビゲーションバーの概要
  2. 使用するクラス
  3. 使用するデータ属性
  4. 基本的な設置方法
  5. ヘッダー/フッター内に設置する
  6. アイコンを表示する
  7. スウォッチを変更する
  8. アクティブ状態を指定する

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

ナビゲーションバーの概要

ナビゲーションバーは複数のボタンがセットになり水平に配置されるバーです。
ナビゲーションバーを設置するには、コンテナ要素にデータ属性「data-role="navbar"」を割り当てます。そしてコンテナの中に ul/li要素でボタンになる各アイテムを記述します。

コンテナ要素には自動的に ui-navbarクラスが付加され、ボタンはグリッドレイアウトで全体を等分した均等幅になります。

1行に並べることができるボタンは5個までで、数によりボタン幅は自動的に調整されますが、ボタンが6個以上になると2列に固定された複数行になります。

ボタンのうち1つはタップ時にアクティブになりますが、アクティブになったアンカー要素には、ui-btn-active クラスが付加されます。

ナビゲーションバーのデフォルトスウォッチは親要素から継承されます。
変更する場合は ui-body-[a-z]クラスで指定します。

使用するクラス

クラス 説明
ui-btn-active ページロード時にアクティブ化するボタンを指定
ui-state-persist ページ遷移後もアクティブ状態を維持
ui-body-[a-z] ナビゲーションバー全体のスウォッチを指定

使用するデータ属性

データ属性 説明
data-icon アイコンリスト参照 ボタンに表示するアイコン
アンカー要素に指定
data-iconpos left | right | top | bottom | notext アイコンの表示位置
コンテナ要素に指定
data-theme swatch letter (a-z) ボタン個別に適用するスウォッチ
アンカー要素に指定

基本的な設置方法

コンテナとなる div要素にデータ属性「data-role="navbar"」を指定し、その中に ulリストでアンカーリンクを記述します。ページロード時にアクティブにしたいボタンには ui-btn-activeクラスを付加します。

以下は記述例です。

表示は以下になります。

ボタン5個のナビゲーションバー

ボタンが5個までは1行で横に並びますが、6個以上になると2列に固定され複数行になります。

ボタン8個のナビゲーションバー

ヘッダー/フッター内に設置する

ナビゲーションバーは、ヘッダー/フッター内に設置することができます。その場合はナビゲーションバーは画面横幅一杯まで広がります。

以下はヘッダーに設置した例です。

ヘッダーに設置したナビゲーションバー

ヘッダー/フッター内に設置する場合でも、コードの記述方法は全く変わりません。

以下はフッターに設置した例です。

フッターに設置したナビゲーションバー

アイコンを表示する

ボタンにアイコンを表示するには、データ属性「data-icon="アイコン名"」を使う方法と、
ui-icon-[アイコン名]クラスを使う方法があります。

データ属性を使うと、アイコンの表示位置はコンテナ要素に data-iconpos属性を指定すればいいので、記述が1回で済みます。なお data-iconpos属性は、省略時はデフォルトの "top" になります。

以下はその記述例です。

表示は以下になります。

アイコンを表示したナビゲーションバー

記述量は多くなりますが、クラスを使ってもアイコンを表示できます。
それぞれのボタンにアイコンの種類と表示位置を指定します。

以下はクラスを使った場合ですが、上の例と全く同じ表示になります。

スウォッチを変更する

ナビゲーションバーのデフォルトスウォッチは "a" です。
一括で変更する場合は、ui-body-[a-z]クラスでボタンの親要素に指定します。

以下はul要素に "b" を指定した例です。

表示は以下になります。

スウォッチを変更したナビゲーションバー

ボタン個別にスウォッチを指定することもできます。
その場合は、data-theme属性を各ボタンに指定します。

表示は以下になります。

個別にスウォッチを指定したナビゲーションバー

アクティブ状態を指定する

ページロード時にアクティブにしたいボタンには ui-btn-activeクラスを付加しますが、ページ遷移して戻ってきたときにもアクティブにしたいときは、さらに ui-state-persistクラスを加えます。

以下のコードは3ページありますが、いずれのページに飛んだときでもきちんとアクティブ状態表示が維持されます。

PCサイトではすべてのページのヘッダー近辺にグローバルナビとして、割と大き目のナビゲーションバーを設置するのですが、スマートフォンサイトではアコーディオンメニューやスライドメニューなどで実装するケースも多いです。モバイル用のナビゲーションは何が良いかサイトの特性に合わせて設置するようにしましょう。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ