jQuery Mobile ヘッダーを設置する

jQuery Mobile のヘッダーは、左右にボタンの表示エリアを確保し自動的に配置してくれたり、戻るボタンを付加してくれる便利な機能があります。この記事ではヘッダーにボタンを設置する方法と固定ヘッダーにする方法を解説します。

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

【コンテンツ】

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

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

ヘッダーの概要

ヘッダーは通常ページの最初の要素になりますが、jQuery Mobile ではヘッダーはツールバーウィジェットの1つであり、データ属性「data-role="header"」を割り当てられた要素がヘッダーになります。ヘッダーには自動的に ui-headerクラスが付加されます。

ヘッダー内に記述したアンカーリンクは自動的にボタン形状になります。このときボタンはテキストの長さに応じた幅のインラインボタンになります。ui-btn-inlineクラスの指定は必要ありません。

ヘッダーには真ん中にページタイトルがきて、両脇にナビゲーションなどのボタンが配置されることを想定しており、ボタン配置のために両脇はスロットが確保されています。デフォルトではスロットの幅は30%に設定されています。

タイトル部分には「text-overflow: ellipsis;」が設定されており、テキストがはみ出した場合は省略記号 [...] が表示されます。
もしタイトル部分の表示エリアを拡大したい場合は、セレクタ「.ui-header .ui-title」の marginを調整します。

タイトルに使うHTML要素は通常 "h1" ですが、h1~h6 いずれの要素で指定しても構いません。

ヘッダーのスウォッチは親要素から継承されて "a" になります。変更する場合は data-theme属性で指定します。

使用するクラス

クラス 説明
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) 適用するスウォッチ

ヘッダーにボタンを設置する

左右に設置する

フレームワークは、ヘッダーウィジェットの中にある最初のリンクを左側に設置します。そして次のリンクを右側に設置します。

ボタンを左右に設置したヘッダー

以下はコード例です。

右側だけに設置する

ボタンが順番に左右に割り振られる仕様は、実はバージョン1.4では非推奨になっています。
明示的に設置位置を指定するクラスとして、「ui-btn-left」と「ui-btn-right」があります。

このクラスを使い、ボタンを1つだけ右側に設置することもできます。

ボタンを右側だけに設置したヘッダー

左右に2個ずつ設置する

ボタンは左右に1個ずつだけしか設置できないわけではありません。
複数個設置するには div要素でリンクを囲み、そのdiv要素に ui-btn-leftクラスあるいは ui-btn-rightクラスを指定します。

ボタンを左右に2個ずつ設置したヘッダー

ヘッダーに「戻るボタン」を設置する

「data-role="header"」をつけた要素に、「data-add-back-btn="true"」をつけると戻るボタンが左側に表示されます。

注意点としては、同じサイトの別ページから遷移してきたときだけ戻るボタンが表示されるということです。直接そのページにブラウザでアクセスしても戻るボタンは表示されません。

「戻るボタン」を設置したヘッダー

以下はメインページとサブページ間で遷移するコードです。
サブページへ移動したら戻るボタンが表示されます。逆に最初にサブページにアクセスした場合は、メインページのほうに戻るボタンが表示されます。

戻るボタンのテキストの変更

デフォルトでは "Back" と表示されますが、data-back-btn-text属性を使うとテキストを変更できます。

戻るボタンのテキストを変更したヘッダー

戻るボタンのスウォッチの変更

デフォルトではスウォッチ"a"ですが、data-back-btn-theme属性を使うとスウォッチを変更できます。

戻るボタンのスウォッチを変更したヘッダー

固定ヘッダーにする

ヘッダーは通常、ページをスクロールすると隠れて見えなくなりますが、
「data-position="fixed"」を指定するとスクロールしても上部に固定されて表示されます。
ただしページ内をタップするごとに解除⇔固定がトグルで切り替わります。

jQuery Mobile のヘッダーは便利な反面、制約もあります。もっと自由なレイアウトでヘッダーを作成したい場合は、「data-role="header"」を使わず、div要素に「class="ui-bar ui-bar-a"」などとツールバーのクラスを指定する方法もあります。

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

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ