2021.12.6|JavaScript

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

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

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

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

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

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

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

ナビゲーション
<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="#">CONTACT</a></li>
</ul>
</div>
複数のナビゲーション

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

まとめ

クラスも指定要素も簡単に設置できるのが良いですね。
cssを自分で書いたりjavascriptを設定することもないので簡単にグローバルナビゲーションが設置できます。