jQuery Mobile逆引きリファレンス
jQuery Mobileページでヘッダー／フッターの表示をカスタマイズするには？
ヘッダー／フッターを作成する方法を解説。また、ヘッダー／フッターの位置を固定したり、タップで非表示にしたりする方法なども紹介。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
jQuery Mobileでは、ページ要素の配下にdata-role属性がheader／footerである要素を配置することで、定型的なヘッダー／フッターを作成できます。別稿「jQuery Mobileで基本的なページを定義するには？」ではまず、テキストを配置しただけでしたが、一般的なヘッダー／フッターではアプリでよく使うボタン／リンクなどを配置するツールバーとしての役割を担います。
本稿でも、最初にヘッダー／フッターにボタンを配置する方法を紹介した後、ヘッダー／フッターを位置固定したり、タップで非表示にしたりする方法などを紹介します。
ヘッダーにボタンを配置する
ヘッダーにボタンを配置するには、以下のようなコードで表します。
<div data-role="page"> <div data-role="header" data-theme="b"> <a href="index.html" class="ui-btn ui-btn-a ui-btn-left">Home</a> <h1>jQuery Mobile TIPS</h1> <a href="help.htmll" class="ui-btn ui-btn-a ui-btn-right">About</a> </div> <div role="main" class="ui-content"> ここが本文です。 </div> <div data-role="footer"> <h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3> </div></div> |
「class="ui-btn-left"」「class="ui-btn-right"」は、ボタンをそれぞれ「ヘッダーの左／右に配置しなさい」という意味です。jQuery Mobile 1.3以前ではボタンの配置順に応じて、自動的に左→右の順に配置されましたが、この挙動は1.4で非推奨となり、1.5で削除の予定です。配置位置は、class属性で明示的に示すようにしてください。
［Note］ボタンへの自動整形は利用しない
もう1つ、jQuery Mobile 1.4で変更になった点があります。1.3以前では、ヘッダー／フッターに配置されたリンクは自動的にボタンとして整形されていましたが、その挙動は1.4で非推奨となり、1.5で削除となる予定です。今後、リンクボタンを作成したい場合には「class="ui-btn"」属性でスタイルを明示してください。
［戻る］ボタンを設置する
前のページに戻るためのボタンを設置するならば、ヘッダー要素*1に対して「data-add-back-btn="true"」属性を付与します。
- *1 1.3以前のバージョンでは、ページ要素に対して追加していました。
<div data-role="page"> <div data-role="header" data-theme="b" data-add-back-btn="true" data-back-btn-text="戻る" data-back-btn-theme="a"> <h1>jQuery Mobile TIPS</h1> <a href="help.htmll" class="ui-btn ui-btn-a ui-btn-right">About</a> </div> <div role="main" class="ui-content"> ここが本文です。 </div> <div data-role="footer"> <h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3> </div></div> |
ただし、［戻る］ボタンはそのページに直接アクセスした場合、もしくは外部サイトからのリンクである場合には表示されませんので注意してください（＝サイト内からのリンクである場合にのみ表示）。
［戻る］ボタンのキャプションはdata-back-btn-text属性で、テーマはdata-back-btn-theme属性で、それぞれ変更できます。
［Note］アプリ共通で［戻る］ボタンを有効にするには？
全てのページで［戻る］ボタンを有効にするならば、グローバル設定を利用するのが便利です。これには、mobileinitイベントリスナーに対して、以下のようなコードを追加してください。なお、mobileinitはjQuery Mobileを初期化する際に発生するイベントなので、「jQueryを読み込んだ後、jQuery Mobileを読み込む前」に登録しなければならない点に注意してください。
$(document).on('mobileinit', function() { $.mobile.toolbar.prototype.options.addBackBtn = true; $.mobile.toolbar.prototype.options.backBtnText = '戻る'; $.mobile.toolbar.prototype.options.backBtnTheme = 'a';}); |
ちなみに、jQuery Mobile 1.3以前は［戻る］機能はPageウィジェットに属していましたが、1.4でToolbarウィジェットに移動となっています。よって、1.3以前では太字の部分は「page」と置き換えてください。
フッターにボタンを配置する
以下はフッターにボタンを配置するコードと実行例です。フッターに配置したボタンは、デフォルトで、左詰めで配置されます。
<div data-role="page"> <div data-role="header" data-theme="b"> <h1>jQuery Mobile TIPS</h1> </div> <div role="main" class="ui-content"> ここが本文です。 </div> <div data-role="footer" data-theme="b" class="ui-bar"> <a href="index.html" class="ui-btn ui-btn-a">Home</a> <a href="config.html" class="ui-btn ui-btn-a">Config</a> <a href="about.html" class="ui-btn ui-btn-a">About</a> </div></div> |
ただし、デフォルトの状態ではボタンの周囲にパディングが設定されていないことから、心持ち詰まったレイアウトとなります。これを避けるためには、フッター要素に対して「class="ui-bar"」属性を付与することで、ツールバーの表示に適した余白が付与されます。
ヘッダー／フッターを位置固定する
ヘッダー／フッターに配置するボタンは、大概、ツールバー／ナビゲーションバーとしての役割を担うもので、いつでもすぐさまにアクセスできることを求められます。よって、ヘッダー／フッターにボタンを配置した場合には位置を固定し、ページのスクロールによってヘッダー／フッターが上下に流れてしまわないようにすべきです。
これには（次のコードのように）、ヘッダー／フッター要素に対して「data-position="fixed"」属性を付与するだけです。
<div data-role="page"> <div data-role="header" data-position="fixed" data-fullscreen="true" data-theme="b"> ……中略…… </div> <div role="main" class="ui-content"> ……中略…… </div> <div data-role="footer" data-position="fixed" data-fullscreen="true" data-theme="b" class="ui-bar"> ……中略…… </div></div> |
ページをスクロール
「data-fullscreen="true"」属性は、位置固定したヘッダー／フッターの表示を、画面タップによって非表示にできることを意味します（フルスクリーンモード。次の画面はその例）。これによって、限られた画面領域を最大限活用できます。写真など、コンテンツの表示を主目的とするアプリでは、フルスクリーンモードを有効にしておくことをお勧めします。
画面の本文などをタップ
ツールバーを永続化する
ページ間で、ヘッダー／フッター要素にアプリ共通のdata-id値を付与しておくことで（次のコードを参照）、ページを遷移する間も、ヘッダー／フッターをそのままにコンテンツだけを書き換えられます（永続化ツールバー）。これによって、ページの移動中もボタン操作などを継続して行えますので便利です。永続化ツールバーを有効にするには、対象のヘッダー／フッターを位置固定しておくようにしてください。
<div data-role="page"> <div data-id="common_header" data-role="header" data-position="fixed" data-fullscreen="true" data-theme="b">...</div> <div role="main" class="ui-content">...</div> <div data-id="common_footer" data-role="footer" data-position="fixed" data-fullscreen="true" data-theme="b" class="ui-bar">...</div></div> |
［次のページへ］ボタンをタップしてページ遷移
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
1. jQuery Mobileを利用するには？
jQuery Mobileの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery Mobileが動作するスマホ／タブレット環境と、jQuery Mobileページの基本構造を説明する。
4. 【現在、表示中】≫ jQuery Mobileページでヘッダー／フッターの表示をカスタマイズするには？
ヘッダー／フッターを作成する方法を解説。また、ヘッダー／フッターの位置を固定したり、タップで非表示にしたりする方法なども紹介。
