jQuery Mobile コンポーネントシリーズ #4 「ツールバー」

ツールバーとは

jQuery Mobileのツールバーには「ヘッダー」と「フッター」の２つのツールバーがあります。
ヘッダーはページコンテナの一番最初、フッダーはページコンテナの一番最後にくる要素です。

この他に、任意の箇所に独自のツールバーを設定することもできます。

ツールバーの構造

ヘッダー

ヘッダーは、通常ページタイトルと２つのボタンからなります。「data-role="header"」を指定します。

<header data-role="header">
	<a href="#">ナビ1</a>
	<h1>ヘッダー見出し</h1>
	<a href="#">ナビ2</a>
</header>

フッター

フッターへはヘッダーよりも比較的自由に設定できるようになっています。「data-role="footer"」を指定します。

<footer data-role="footer">
	<h4>フッター</h4>
</footer>

ヘッダー、フッダーサンプル

<div data-role="page">
	<header data-role="header">
		<a href="#">ナビ1</a>
		<h1>ヘッダー見出し</h1>
		<a href="#">ナビ2</a>
	</header>
	<div data-role="content">
	</div>
	<footer data-role="footer">
		<h4>フッター</h4>
	</footer>
</div>

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

カスタムツールバー

data-roleの指定を行わず、標準的なツールバーの体裁を持ったバーの指定ができます。
この方法はツールバーとなる要素のクラスに「ui-bar」とテーマの指定「ui-bar-x」を指定するだけです。

<div class="ui-bar ui-bar-b">
	<a href="#">ナビ1</a>
	<a href="#">ナビ2</a>
	<a href="#">ナビ3</a>
</div>

カスタムツールバーサンプル

カスタムツールバーを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

固定ポジションモード

固定ポジションモードは固定ヘッダー、フッターを実現できます。
指定はヘッダー、フッターに対して、「data-position="fixed"」を指定するだけです。

<div data-role="page">
	<header data-role="header" data-position="fixed">
		<h1>固定ポジションモード</h1>
	</header>
	<div data-role="content">
	</div>
	<footer data-role="footer" data-position="fixed">
		<h4>固定フッター</h4>
	</footer>
</div>

固定ポジションモードを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

ナビゲーションバー

ナビゲーションバーは、ヘッダーやフッター、カスタムツールバーに最大5つまでのアイコン付きボタンを配置することができます。
ナビゲーションバーは「data-role="navbar"」を指定します。

また、ナビゲーションバーをヘッダーに設置した場合、ヘッダーの直下にナビゲーションバーが追加されます。

<div data-role="page">
	<header data-role="header">
		<h1>ナビゲーションバー</h1>
		<div data-role="navbar">
			<ul>
				<li><a href="#">ナビ1</a></li>
				<li><a href="#">ナビ2</a></li>
				<li><a href="#">ナビ3</a></li>
				<li><a href="#">ナビ4</a></li>
				<li><a href="#">ナビ5</a></li>
			</ul>
		</div>
	</header>
	<div data-role="content">
	</div>
	<footer data-role="footer" data-position="fixed">
		<div data-role="navbar">
			<ul>
				<li><a href="#">ナビ1</a></li>
				<li><a href="#">ナビ2</a></li>
				<li><a href="#">ナビ3</a></li>
				<li><a href="#">ナビ4</a></li>
				<li><a href="#">ナビ5</a></li>
			</ul>
		</div>
	</footer>
</div>

ナビゲーションバーを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

ナビゲーションバーのアクティブ状態

ナビゲーションのアクティブ状態を制御するには、複数のページコンテナにあるナビゲーションバーに対して、共有の「data-id」を指定します。
また、クラスに「ui-btn-active」と「ui-state-persit」を指定します。

<div data-role="page" id="page1">
	<header data-role="header">
		<h1>1ページ</h1>
	</header>
	<div data-role="content">
	</div>
	<footer data-role="footer" data-position="fixed" data-id="globalFooter">
		<div data-role="navbar">
			<ul>
				<li><a href="#page1" class="ui-btn-active ui-state-persit">ページ1</a></li>
				<li><a href="#page2">ページ2</a></li>
				<li><a href="#page3">ページ3</a></li>
			</ul>
		</div>
	</footer>
</div>

<div data-role="page" id="page2">
	<header data-role="header">
		<h1>2ページ</h1>
	</header>
	<div data-role="content">
	</div>
	<footer data-role="footer" data-position="fixed" data-id="globalFooter">
		<div data-role="navbar">
			<ul>
				<li><a href="#page1">ページ1</a></li>
				<li><a href="#page2" class="ui-btn-active ui-state-persit">ページ2</a></li>
				<li><a href="#page3">ページ3</a></li>
			</ul>
		</div>
	</footer>
</div>

<div data-role="page" id="page3">
	<header data-role="header">
		<h1>3ページ</h1>
	</header>
	<div data-role="content">
	</div>
	<footer data-role="footer" data-position="fixed" data-id="globalFooter">
		<div data-role="navbar">
			<ul>
				<li><a href="#page1">ページ1</a></li>
				<li><a href="#page2">ページ2</a></li>
				<li><a href="#page3" class="ui-btn-active ui-state-persit">ページ3</a></li>
			</ul>
		</div>
	</footer>
</div>

ナビゲーションバーのアクティブ状態を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

ナビゲーションバーにアイコンを指定する

ナビゲーションアイコンを指定するには、各アンカーに「data-icon="xxx"」を指定します。

<li><a href="#" data-icon="check">ナビ</a></li>

ナビゲーションアイコンの位置

ナビゲーションアイコンの位置を設定するには「data-iconpos=“xxx”」を指定します。ポジションはtop,bottom,left,rightの指定ができます。

<div data-role="navbar" data-iconpos="left">
	<ul>
		<li><a href="#" data-icon="home">ナビ1</a></li>
		<li><a href="#" data-icon="grid">ナビ2</a></li>
		<li><a href="#" data-icon="search">ナビ3</a></li>
		<li><a href="#" data-icon="star">ナビ4</a></li>
		<li><a href="#" data-icon="info">ナビ5</a></li>
	</ul>
</div>

アイコンとアイコンの位置を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

フルスクリーンモード

フルスクリーンモードを利用している際にツールバーを固定ポジションモードにすることで、コンテンツのエリアを画面いっぱいに利用することができます。
フルスクリーンモードにするには、ページコンテナに対して「data-fullscreen="true"」を指定し、ツールバーを固定ポジションモードにします。

<div data-role="page" data-fullscreen="true">
	<header data-role="header" data-position="fixed">
		<h1>フルスクリーンモード</h1>
	</header>
	<div data-role="content">
	</div>
	<footer data-role="footer" data-position="fixed">
		<h4>フルスクリーンモードフッター</h4>
	</footer>
</div>

フルスクリーンモードを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

これでツールバーについてはおしまいです。
次はボタンについて紹介したいと思います。

参考サイト

• ツールバー