jQuery Mobile ヘッダーを設置する
公開日：2014年10月11日
最終更新日：2014年11月8日
jQuery Mobile のヘッダーは、左右にボタンの表示エリアを確保し自動的に配置してくれたり、戻るボタンを付加してくれる便利な機能があります。この記事ではヘッダーにボタンを設置する方法と固定ヘッダーにする方法を解説します。
«次の特集記事» jQuery Mobile フッターを設置する
«前の特集記事» jQuery Mobile アイコンをボタンに表示する
【コンテンツ】
【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5
ヘッダーの概要
ヘッダーは通常ページの最初の要素になりますが、jQuery Mobile ではヘッダーはツールバーウィジェットの１つであり、データ属性「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 2 3 4 5 |
<div data-role="header"> <h1>DEMOページ</h1> <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> |
右側だけに設置する
ボタンが順番に左右に割り振られる仕様は、実はバージョン1.4では非推奨になっています。
明示的に設置位置を指定するクラスとして、「ui-btn-left」と「ui-btn-right」があります。
このクラスを使い、ボタンを１つだけ右側に設置することもできます。
|
1 2 3 4 |
<div data-role="header"> <h1>DEMOページ</h1> <a href="#" class="ui-btn ui-icon-gear ui-btn-icon-left ui-btn-right">設定</a> </div> |
左右に２個ずつ設置する
ボタンは左右に１個ずつだけしか設置できないわけではありません。
複数個設置するには div要素でリンクを囲み、そのdiv要素に ui-btn-leftクラスあるいは ui-btn-rightクラスを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div data-role="header"> <h1>DEMOページ</h1> <div class="ui-btn-left"> <a href="#" class="ui-btn ui-icon-home ui-btn-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon">ホーム</a> <a href="#" class="ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon">設定</a> </div> <div class="ui-btn-right"> <a href="#" class="ui-btn ui-icon-check ui-btn-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon">保存</a> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon">削除</a> </div> </div> |
ヘッダーに「戻るボタン」を設置する
「data-role="header"」をつけた要素に、「data-add-back-btn="true"」をつけると戻るボタンが左側に表示されます。
注意点としては、同じサイトの別ページから遷移してきたときだけ戻るボタンが表示されるということです。直接そのページにブラウザでアクセスしても戻るボタンは表示されません。
以下はメインページとサブページ間で遷移するコードです。
サブページへ移動したら戻るボタンが表示されます。逆に最初にサブページにアクセスした場合は、メインページのほうに戻るボタンが表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div data-role="page" id="main"> <div data-role="header" data-add-back-btn="true"> <h1>DEMOページ メイン</h1> </div> <div role="main" class="ui-content"> <p>このページはメインページです。</p> <p><a href="demo11-4-2.html">サブページへ移動 »</a></p> </div> <div data-role="footer"> <p>© 2014 Web Tips アーカイブ</p> </div> </div> <div data-role="page" id="sub"> <div data-role="header" data-add-back-btn="true"> <h1>DEMOページ サブ</h1> </div> <div role="main" class="ui-content"> <p>このページはサブページです。</p> <p><a href="demo11-4-1.html">メインページへ移動 »</a></p> </div> <div data-role="footer"> <p>© 2014 Web Tips アーカイブ</p> </div> </div> |
戻るボタンのテキストの変更
デフォルトでは "Back" と表示されますが、data-back-btn-text属性を使うとテキストを変更できます。
|
1 2 3 |
<div data-role="header" data-add-back-btn="true" data-back-btn-text="戻る"> <h1>DEMOページ サブ</h1> </div> |
戻るボタンのスウォッチの変更
デフォルトではスウォッチ"a"ですが、data-back-btn-theme属性を使うとスウォッチを変更できます。
|
1 2 3 |
<div data-role="header" data-add-back-btn="true" data-back-btn-text="戻る" data-back-btn-theme="b"> <h1>DEMOページ サブ</h1> </div> |
固定ヘッダーにする
ヘッダーは通常、ページをスクロールすると隠れて見えなくなりますが、
「data-position="fixed"」を指定するとスクロールしても上部に固定されて表示されます。
ただしページ内をタップするごとに解除⇔固定がトグルで切り替わります。
|
1 2 3 |
<div data-role="header" data-position="fixed"> <h1>DEMOページ 固定ヘッダー</h1> </div> |
jQuery Mobile のヘッダーは便利な反面、制約もあります。もっと自由なレイアウトでヘッダーを作成したい場合は、「data-role="header"」を使わず、div要素に「class="ui-bar ui-bar-a"」などとツールバーのクラスを指定する方法もあります。
«次の特集記事» jQuery Mobile フッターを設置する
«前の特集記事» jQuery Mobile アイコンをボタンに表示する
スポンサーリンク
