この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
ツールバーとは
jQuery Mobileのツールバーには「ヘッダー」と「フッター」の2つのツールバーがあります。
ヘッダーはページコンテナの一番最初、フッダーはページコンテナの一番最後にくる要素です。
この他に、任意の箇所に独自のツールバーを設定することもできます。
ツールバーの構造
ヘッダー
ヘッダーは、通常ページタイトルと2つのボタンからなります。「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ブラウザでの閲覧をおすすめします。)
これでツールバーについてはおしまいです。
次はボタンについて紹介したいと思います。