jQuery Mobile フッターを設置する

jQuery Mobile のフッターは、機能はヘッダーに似ていますが、より柔軟な使い方ができるように作られています。そのためボタンの設置方法も微妙に違います。この記事ではフッターにボタンを設置する方法と固定フッターにする方法を解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. フッターの概要
  2. 使用するクラス
  3. 使用するデータ属性
  4. フッターにボタンを設置する
  5. 固定フッターにする

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

フッターの概要

フッターは通常ページの最後の要素になりますが、jQuery Mobile ではフッターはヘッダー同様ツールバーウィジェットの1つであり、データ属性「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) 適用するスウォッチ

フッターにボタンを設置する

デフォルトで設置する

デフォルトでは、左から順番に並んで配置されます。

デフォルトでボタンを設置した例

デフォルトでは左に余白がなくピッタリと配置されますが、ui-barクラスを div要素に付加すると paddingが設定されます。

ui-barクラスを追加した例

左右に設置する

ボタンを左右に設置するには、位置を指定する ui-btn-leftクラスと ui-btn-rightクラスを a要素に付加します。
この場合は左右に余白ができますが、フッターエリアの高さが正常に計算されず以下のような表示になります。

左右にボタンを設置した例

これを回避するには、フッターにタイトルやコピーライトなど何らかのテキストを記述します。

テキストを記述しフッターエリアの高さを調整した例

なおこの例では、フッターエリアの高さを微調整するため以下のスタイル設定も加えています。

また、フッターに何もテキストを表示しない場合は、以下のようにui-titleクラスを指定した空の要素を記述してください。

<span class="ui-title" />

左右に2個ずつ設置する

ヘッダーと同じ方法で複数のボタンを左右に設置できます。
a要素をdiv要素で囲み、そのdiv要素に ui-btn-leftクラスあるいは ui-btn-rightクラスを指定します。

左右に2個ずつボタンを設置した例

この例でもフッターエリアの高さを微調整するため以下のスタイル設定を加えています。

固定フッターにする

ヘッダーと同様、フッターも「data-position="fixed"」を指定すると、スクロールしても下部に固定されて表示されます。
またページ内をタップするごとに解除⇔固定がトグルで切り替わります。

スマートフォンではページ上部よりも下部のほうがユーザーはタップしやすいため、UI要素としてフッターは重要です。PCサイトではフッターにコピーライトしか表示していないサイトもたくさんありますが、モバイルサイトでは効果的なリンクを設置することを検討しましょう。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ