今回はツールバーについて解説します。
ツールバーとは、iPhoneやAndroidのネイティブアプリで多く見られる画面の上下に存在しているバーです。表示される位置によって分けられ、上に存在しているツールバーをヘッダー、下に存在しているツールバーをフッタと呼びます。
タイトルを表示したり、前のページへの遷移を行うボタンや特定の機能を呼び出すボタンを持っています。
それでは続きでツールバーについて解説していきます。
ヘッダ
画面の上部に存在しているヘッダは、
- ページのタイトル
- 左右にボタン
を表示させることが可能です。
ヘッダを表示させるにはpage要素の中にdata-role=”header”を指定したdiv要素を記述します。
<div data-role="header"> <h1>ページタイトル</h1> </div>
ページタイトルは通常h1要素になりますが、必要に応じてh1〜h6を指定することも可能です。
ヘッダへのボタンの追加
ヘッダにはタイトルの左右にボタンを表示させることができます。
■jQueryMobileSampleToolbar1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" id="top" data-add-back-btn="true" >
<!-- ヘッダー -->
<div data-role="header" data-position="inline">
<a href="index.html" data-icon="delete">Cancel</a>
<h1>ページタイトル</h1>
<a href="index.html" data-icon="check">Save</a>
</div>
<!-- コンテンツ -->
<div data-role="content">
<p>コンテンツ</p>
</div>
</div>
</body>
</html>
div要素内にa(アンカー)要素を配置することで自動的にボタンとして表示されます(16,18行目)。
通常のボタンと同様にユーザーにボタンの機能を分かり易く示すためにdata-icon属性を指定してアイコンを表示させることも可能です。アイコンの種類については「jQuery Mobileの基礎/ボタン1」を参照してください。
上記のサンプルでは2つのボタンを表示させていますが、もちろん1つだけ表示させることも可能です。
注意点としてはデフォルトでは1つの場合は左側に表示するということになっていることです。
例えば
<div data-role="header" data-position="inline"> <h1>ページタイトル</h1> <a href="index.html">Save</a> </div>
と書くと右側に表示されそうな気もしますが、左側に表示されてしまいます。
右側に表示させたい場合は、アンカー要素にui-btn-rightクラスを指定します。
<div data-role="header" data-position="inline"> <h1>ページタイトル</h1> <a href="index.html" class="ui-btn-right">Save</a> </div>
戻るボタン
ページ遷移を「jQuery Mobileの基礎/ページ」で説明しましたが、遷移後のページでヘッダに戻るボタンを簡単に付けることが可能です。
■jQueryMobileSampleToolbar2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" id="top">
<!-- ヘッダー -->
<div data-role="header">
<h1>ヘッダー</h1>
</div>
<!-- コンテンツ -->
<div data-role="content">
<p>1ページ目だよ</p>
<p><a href="#second">いざ、2ページ目へ</a></p>
</div>
</div>
<div data-role="page" id="second" data-add-back-btn="true" >
<!-- ヘッダー -->
<div data-role="header" data-add-back-btn="true" >
<h1>戻るボタン付きヘッター</h1>
</div>
<!-- コンテンツ -->
<div data-role="content">
<p>2ページ目</p>
</div>
</div>
</body>
</html>
フッタ
フッタも基本的にはヘッダと同じで、data-role 属性値がheaderではなく、footerを指定します。
<div data-role="footer" > <h1>フッターだよ</h1> </div>
ヘッターとの主な違いは以下の通りです。
- アンカー要素を自動でボタンにはしてくれない
- ボタンを3個以上配置することが可能
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="top">
<!-- ヘッダー -->
<div data-role="header">
<h1>ヘッター</h1>
</div>
<!-- コンテンツ -->
<div data-role="content">
<p>フッターにボタン並べてみた</p>
</div>
<!-- フッター -->
<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
<a href="index.html" data-role="button" data-icon="arrow-l">Left</a>
<a href="index.html" data-role="button" data-icon="arrow-r">Right</a>
</div>
</div>
</body>
</html>
このようにボタンを4つ配置することも可能です。
アンカー要素を自動でボタンにはしてくれないので、data-role=”button”を指定する必要があります。
また、デフォルトではナビゲーションのための余白が確保されていないため、適度な余白をとるには class=“ui-bar” を指定します。
おつかれさまです。今回はツールバーを解説しました。次回はツールバーの凝った使い方について解説します。