jQuery Mobileヘッダとフッタ

はじめに

今回はヘッダやフッタについてです。以前の記事で全てのページのヘッダに「戻る」ボタンを付ける小技を紹介しました。今回はもっと基本的なところについて紹介します。

「戻る」ボタン

最初は「戻る」ボタンの話です。jQuery Mobileで「戻る」ボタンを実装するには、aタグを使ってdata-rel="back"属性を指定してあげる事で実現できます。こんな感じです。

<a href="#" data-role="button" data-rel="back">戻る</a>

ヘッダに「戻る」ボタンを付ける場合はこんなコードを毎回書く必要はなく、pageにdata-add-back-btn="true"を指定してあげればOKです。

<div data-role="page" data-add-back-btn="true">

さらにボタンのテキスト表示を変えるにはdata-back-btn-text="{変更するテキスト}"も指定します。

<div data-role="page" data-add-back-btn="true" data-back-btn-text="戻る">
</div>

「戻る」以外のボタン

ヘッダの中には「戻る」以外にもボタンを置く事が可能です。ヘッダの右側に「設定」ボタンがあるというアプリケーションもあるでしょう。ボタンはhtmlでの宣言順により、最初のボタンが左端に、2つめのボタンが右端に置かれます。下記の例だと、左端に表示されます。このままでは、自動的に表示される「戻る」ボタンとかぶってしまうので、class="ui-btn-right"を指定してあげます。(タグの順序ではh1の後ろにボタンを置いているので右に出そうな感じしますが、あくまでもボタンの宣言順で配置が決まります。)

<div data-role="header">
	<h1>sample</h1>
	<a href="#option" data-role="button" class="ui-btn-right">設定</a>
</div>

ここまでのサンプルは次の様になります。

<div data-role="page" id="page1" data-add-back-btn="true" data-back-btn-text="戻る">
	<div data-role="header">
		<h1>sample</h1>
		<a href="#" data-role="button" class="ui-btn-right">設定</a>
	</div>
	<div data-role="content">
		<a href="#page2" data-role="button">page2へ</a>
	</div>
	<div data-role="footer">
		<h4>sample</h4>
	</div>
</div>

<div data-role="page" id="page2" data-add-back-btn="true" data-back-btn-text="戻る">
	<div data-role="header">
		<h1>sample</h1>
		<a href="#" data-role="button" class="ui-btn-right">設定</a>
	</div>
	<div data-role="content">
		<div id="map_canvas"></div>
	</div>
	<div data-role="footer">
		<h4>sample</h4>
	</div>
</div>

サンプル1を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

ヘッダの固定

これまでの例だとヘッダやフッタはまさにコンテンツを挟み込む様に表示されますが、data-position="fixed"を指定してあげるとスクロールについてくるようになります。さらに、pageでdata-fullscreen="true"を指定すると、コンテンツ部分のタップでヘッダやフッタが消えたり表示されたりします。

ヘッダの共用

今までの例だとヘッダやフッタはページ遷移する毎にアニメーション付きで遷移します。共通した部分であれば遷移時もそのままにしたいですね。そんな時にはdata-id要素を利用します。例えばdata-id="1"などとして全てのフッタに指定します。

ここまでをまとめると次の様になります。

<div data-role="page" id="page1" data-add-back-btn="true" data-back-btn-text="戻る" data-fullscreen="true">
	<div data-role="header" data-position="fixed">
		<h1>sample</h1>
		<a href="#" data-role="button" class="ui-btn-right">設定</a>
	</div>
	<div data-role="content">
		<a href="#page2" data-role="button">page2へ</a>
	</div>
	<div data-role="footer" data-position="fixed" data-id="1">
		<h4>sample</h4>
	</div>
</div>

<div data-role="page" id="page2" data-add-back-btn="true"  data-back-btn-text="戻る" data-fullscreen="true">
	<div data-role="header" data-position="fixed">
		<h1>sample</h1>
		<a href="#" data-role="button" class="ui-btn-right">設定</a>
	</div>
	<div data-role="content">
		<div id="map_canvas"></div>
	</div>
	<div data-role="footer" data-position="fixed" data-id="1">
		<h4>sample</h4>
	</div>
</div>

サンプル2を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

まとめ

ということで、基本的なヘッダとフッタの使い方は以上です。ただ、data-positionやdata-fullscreen、data-idの指定による動作は、組み合わせによっては表示されるべき所で表示されなかったり、チカチカしたりと、あまり安定していない印象があります。今後のバージョンアップに期待といったところでしょうか。