2021.12.6｜JavaScript（jQuery）
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を設定することもないので簡単にヘッダーやフッターが設置できます。
