jQuery Mobile フッターを設置する
公開日：2014年10月12日
最終更新日：2014年11月8日
jQuery Mobile のフッターは、機能はヘッダーに似ていますが、より柔軟な使い方ができるように作られています。そのためボタンの設置方法も微妙に違います。この記事ではフッターにボタンを設置する方法と固定フッターにする方法を解説します。
«次の特集記事» jQuery Mobile ナビゲーションバーを設置する
«前の特集記事» jQuery Mobile ヘッダーを設置する
【コンテンツ】
【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5
フッターの概要
フッターは通常ページの最後の要素になりますが、jQuery Mobile ではフッターはヘッダー同様ツールバーウィジェットの１つであり、データ属性「data-role="footer"」を割り当てられた要素がフッターになります。フッターには自動的に ui-footerクラスが付加されます。
フッターは、基本的な構造やオプションはヘッダーに似ていますが、フッターのほうがより柔軟な使い方ができます。
ヘッダーとの違いは以下になります。
- アンカーリンクは自動的にインラインボタンになりますが、両脇に自動的にボタンが配置される機能はなく、位置を指定しないと左から順番に配置されます。
- 位置を指定しないとボタンの左に余白はつかず、画面左にピッタリと配置されます。
フッターのスウォッチは親要素から継承されて "a" になります。変更する場合は data-theme属性で指定します。
使用するクラス
| クラス | 説明 |
|---|---|
| ui-btn-left | ボタンを左側に設置する |
| ui-btn-right | ボタンを右側に設置する |
| ui-bar | ボタンにpaddingをつける |
使用するデータ属性
| データ属性 | 値 | 説明 |
|---|---|---|
| data-position | fixed | 固定フッターの設定 |
| data-theme | swatch letter (a-z) | 適用するスウォッチ |
フッターにボタンを設置する
デフォルトで設置する
デフォルトでは、左から順番に並んで配置されます。
|
1 2 3 4 |
<div data-role="footer"> <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">ホーム</a> <a href="#" class="ui-btn ui-icon-gear ui-btn-icon-left">設定</a> </div> |
デフォルトでは左に余白がなくピッタリと配置されますが、ui-barクラスを div要素に付加すると paddingが設定されます。
左右に設置する
ボタンを左右に設置するには、位置を指定する ui-btn-leftクラスと ui-btn-rightクラスを a要素に付加します。
この場合は左右に余白ができますが、フッターエリアの高さが正常に計算されず以下のような表示になります。
これを回避するには、フッターにタイトルやコピーライトなど何らかのテキストを記述します。
|
1 2 3 4 5 |
<div data-role="footer"> <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left ui-btn-left">ホーム</a> <a href="#" class="ui-btn ui-icon-gear ui-btn-icon-left ui-btn-right">設定</a> <h2>フッター</h2> </div> |
なおこの例では、フッターエリアの高さを微調整するため以下のスタイル設定も加えています。
|
1 2 3 4 |
.ui-footer .ui-title{ line-height: 31px; height: 31px; } |
また、フッターに何もテキストを表示しない場合は、以下のようにui-titleクラスを指定した空の要素を記述してください。
<span class="ui-title" />
左右に２個ずつ設置する
ヘッダーと同じ方法で複数のボタンを左右に設置できます。
a要素をdiv要素で囲み、そのdiv要素に ui-btn-leftクラスあるいは ui-btn-rightクラスを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div data-role="footer"> <div class="ui-btn-left"> <a href="#" class="ui-btn ui-icon-home ui-btn-icon-notext">ホーム</a> <a href="#" class="ui-btn ui-icon-gear ui-btn-icon-notext">設定</a> </div> <div class="ui-btn-right"> <a href="#" class="ui-btn ui-icon-check ui-btn-icon-notext">保存</a> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext">削除</a> </div> <h2>フッター</h2> </div> |
この例でもフッターエリアの高さを微調整するため以下のスタイル設定を加えています。
|
1 2 3 4 5 |
.ui-footer .ui-title{ min-height: 1em; line-height: 1em; height: 1em; } |
固定フッターにする
ヘッダーと同様、フッターも「data-position="fixed"」を指定すると、スクロールしても下部に固定されて表示されます。
またページ内をタップするごとに解除⇔固定がトグルで切り替わります。
|
1 2 3 |
<div data-role="footer" data-position="fixed"> <h2>固定フッター</h2> </div> |
スマートフォンではページ上部よりも下部のほうがユーザーはタップしやすいため、UI要素としてフッターは重要です。PCサイトではフッターにコピーライトしか表示していないサイトもたくさんありますが、モバイルサイトでは効果的なリンクを設置することを検討しましょう。
«次の特集記事» jQuery Mobile ナビゲーションバーを設置する
«前の特集記事» jQuery Mobile ヘッダーを設置する
スポンサーリンク
