jQuery Mobileを利用してグローバルナビゲーションを設定する方法

2021.12.6｜JavaScript（jQuery）

jQuery mobileではグローバルナビゲーションやメニュー一覧など、簡単な指定で設置することができます。 html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。

jQuery Mobileを利用してグローバルナビゲーションを設定する方法を解説します。

本記事の内容

jQuery Mobile要素を使ってグローバルナビゲーションを設定する方法
1.グローバルナビゲーションを配置
2.スウォッチ要素を加えてグローバルナビゲーションを配置
グローバルナビゲーションに指定するクラスと要素
まとめ

jQuery Mobile要素を使ってグローバルナビゲーションを設定する方法

1.グローバルナビゲーションを配置

グロバールナビゲーションは複数のボタンをグループ化してナビゲーションとして横並びや縦並びに配置します。コンテナとなる「div」要素にデータ属性「data-role=”navbar”」を指定し、「ul」要素で設定したリンクリストを配置します。
ナビゲーションの要素内では、ボタンに「class=”ui-btn”」などの指定をしなくても自動的にボタンとして配置されます。
ページロード時にアクティブにしたい場合には、ボタンには「ui-btn-active」クラスを付加します。

複数のナビゲーション

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

<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">PRICE</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

ヘッダー内に配置したナビゲーション

※ヘッダーとフッター内にナビゲーションを配置すると2列にならずに横並びに設定されます。

<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">PRICE</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>

アイコンを表示するナビゲーション

※ボタンにアイコンを指定するには、データ属性「data-icon」、「ui-icon」クラスで指定します。
※アイコンの表示位置はコンテナ要素に「data-iconpos」属性を指定します。

<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="#" data-icon="home" class="ui-btn-active">HOME</a></li>
<li><a href="#" data-icon="user">プロフィール</a></li>
<li><a href="#" data-icon="mail">問い合わせ</a></li>
</ul>
</div>

実装サンプルを作りましたのでこちらでも確認してみてください。
ヘッダーとフッターサンプル

2.スウォッチ要素を加えてグローバルナビゲーションを配置

ナビゲーションの背色や文字色を変更するにはjQuery mobile用のテーマ（スウォッチ）の要素を指定します。
テーマを設定する場合は、「ui-body-[a-z]」クラスを付与します。

スウォッチ要素を加えたナビゲーション

<div data-role="navbar" data-iconpos="top">
<ul class="ui-body-b">
<li><a href="#" data-icon="home" class="ui-btn-active">ホーム</a></li>
<li><a href="#" data-icon="user">プロフィール</a></li>
<li><a href="#" data-icon="mail">問い合わせ</a></li>
</ul>
</div>

実装サンプルを作りましたのでこちらでも確認してみてください。
ヘッダーとフッターサンプル

グローバルナビゲーションに指定するクラスと要素

ヘッダーとフッターに配置したボタンに指定するクラスと要素一覧をご紹介します。

グローバルナビゲーションに指定するクラス一覧

クラス	説明
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)	ボタン個別に適用するスウォッチアンカー要素に指定