2021.12.6|JavaScript

jQuery Mobileを利用してヘッダーとフッターを設定する方法

jQuery Mobileを利用してヘッダーとフッターを設定する方法

jQuery mobileではヘッダー、フッターなど、簡単な指定で設置することができます。 ヘッダーやフッターにボタンを追加したり位置を固定したりすることもjQuery mobile用のクラス要素を利用すれば簡単に設置することができます。

jQuery Mobileを利用してヘッダーとフッターを設定する方法を解説します。

jQuery Mobile要素を使ってヘッダーとフッターを設定する方法

1.ヘッダーとフッターにボタンを配置

jQuery mobileでヘッダーとフッターにボタンを追加する場合、ボタンを指定する要素を使って追加ができます。

ヘッダー
<div data-role="header">
<h1>ヘッダー タイトル</h1>
</div>
ボタンを配置したヘッダー
<div data-role="header" data-theme="b">
<a href="#" class="ui-btn ui-btn-a ui-btn-left">Home</a>
<h1>ヘッダー タイトル</h1>
<a href="#" class="ui-btn ui-btn-a ui-btn-right">About</a>
</div>
フッター
<div data-role="footer">
<h2>Copyright</h2>
</div>
ボタンを配置したフッター

※デフォルトの状態のフッターにボタンを置くとボタンが左詰めの状態で余白が無い状態で設置されますので、フッター要素に対して「class=”ui-bar”」属性を設定することで、ツールバーの表示に余白が設定されます。

<div data-role="footer" data-theme="b" class="ui-bar">
<a href="#" class="ui-btn ui-btn-a">Home</a>
<a href="#" class="ui-btn ui-btn-a">About</a>
<a href="#" class="ui-btn ui-btn-a">Contact</a>
</div>

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

2.ヘッダーとフッターを固定で配置

jQuery mobileでヘッダー/フッターの位置を固定で表示させたい場合、「data-position=”fixed”」属性を追加することで表示が固定になります。

固定で配置したヘッダー
<div data-role="header" data-position="fixed" data-fullscreen="true" data-theme="b">
ヘッダータイトル
</div>
固定で配置したフッター
<div data-role="footer" data-position="fixed" data-fullscreen="true" data-theme="b" class="ui-bar">
フッタータイトル
</div>

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

ボタンに指定するクラスと要素

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

ボタンに指定するクラス一覧
クラス 説明
ui-btn-left ボタンを左側に設置
ui-btn-right ボタンを右側に設置
ボタンに指定する属性一覧
属性 説明
data-add-back-btn true | false 戻るボタンをつける(つける、つけない)
data-back-btn-text string 戻るボタンのテキスト
data-back-btn-theme swatch letter (a-z) 戻るボタンに適用するスウォッチ
data-position fixed ヘッダーの固定
data-theme swatch letter (a-z) 適用するスウォッチ

まとめ

クラスも指定要素も簡単に設置できるのが良いですね。
cssを自分で書いたりjavascriptを設定することもないので簡単にヘッダーやフッターが設置できます。