navbar ウィジェット ～ jQuery Mobile のナビゲーションバー
ウェブサイトでも、モバイルアプリでもタブ式のナビゲーションは非常にわかりやすく人気があります。
jQuery Mobile では、アプリケーションあるいはモバイルウェブサイトの内部を移動するための手段として、 ナビゲーションバーがあります。
ナビゲーションバーではタブ的な画面切り替えをサポートします。
この資料では jQuery Mobile のナビゲーションバー (navbar) の利用方法を紹介します。
navbar の使い方
はじめに、ここで作成するナビゲーションバーのスクリーンショットを示します。
まずは基本的な navbar。
アイコンの位置を左側に変えているバージョン。
カスタムのアイコンを利用した例です。
このコードは次の通りです。
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<title>jQuery Mobile デモ</title>
<link
rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<style>
.ui-icon-my-chat {
background:url(chat.png) no-repeat transparent;
border-radius: 0px;
box-shadow: 0px 0px 0px #000;
}
.ui-icon-my-tag {
background:url(tag.png) no-repeat transparent;
border-radius: 0px;
box-shadow: 0px 0px 0px #000;
}
.ui-icon-my-clock {
background:url(clock.png) no-repeat transparent;
border-radius: 0px;
box-shadow: 0px 0px 0px #000;
}
</style>
<script
src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>navbar デモ</h1>
<div data-role="navbar">
<ul>
<li><a href="#page1"
class="ui-btn-active ui-state-persist"
data-icon="star">Page1</a>
<li><a href="#page2" data-icon="grid">Page2</a>
<li><a href="#page3" data-icon="gear">Page3</a>
</ul>
</div>
</div>
<div data-role="content">
<p>Page1</p>
</div>
<div data-role="footer">© keicode.com</div>
</div>
<div id="page2" data-role="page">
<div data-role="header">
<h1>navbar デモ</h1>
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#page1" data-icon="star">Page1</a>
<li><a href="#page2"
class="ui-btn-active ui-state-persist"
data-icon="grid">Page2</a>
<li><a href="#page3" data-icon="gear">Page3</a>
</ul>
</div>
</div>
<div data-role="content">
<p>Page2</p>
</div>
<div data-role="footer">© keicode.com</div>
</div>
<div id="page3" data-role="page">
<div data-role="header">
<h1>navbar デモ</h1>
<div data-role="navbar">
<ul id='custIconUL'>
<li><a href="#page1" data-icon="my-chat">Page1</a>
<li><a href="#page2" data-icon="my-tag">Page2</a>
<li><a href="#page3"
class="ui-btn-active ui-state-persist"
data-icon="my-clock">Page3</a>
</ul>
</div>
</div>
<div data-role="content">
<p>Page3</p>
</div>
<div data-role="footer">© keicode.com</div>
</div>
</body>
</html>
それではポイントを絞ってそれぞれ見ていきましょう。
基本的な navbar の使い方
navbar を構成するためには data-role="navbar" を指定した div 要素の中に ul を作ります。
<div data-role="header">
<h1>navbar デモ</h1>
<div data-role="navbar">
<ul>
<li><a href="#page1"
class="ui-btn-active ui-state-persist"
data-icon="star">Page1</a>
<li><a href="#page2" data-icon="grid">Page2</a>
<li><a href="#page3" data-icon="gear">Page3</a>
</ul>
この例では data-role="header" の div 要素の中に、navbar が入れ子になっています。
ul 要素の子要素である li にアンカータグでリンクした内容が navbar でナビゲートされるタブになります。
選択要素の色を変える
この例では、選択されたタブの色が青色に変わっています。色を変えるために CSS クラス ui-btn-active をセットします。
さらにクリック後、ページが切り替わっても選択された状態を維持するためには ui-state-persist をセットします。
アイコンを表示する
タブにアイコンを表示するには data-icon 属性を利用します。
jQuery Mobile にはいくつか組み込みのアイコンが用意されているので、data-icon の値として "star", "grid", "gear" ... などの事前定義された値をセットすることによって、アイコンが表示されます。
アイコンの位置を変える
アイコンの表示位置はデフォルトでタブの上部です。これを変更するには data-iconpos 属性を使います。
デフォルトでは top ですが、これを bottom, left, right 等と変更することによって、アイコンの表示位置が変わります。
<div id="page2" data-role="page">
<div data-role="header">
<h1>navbar デモ</h1>
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#page1" data-icon="star">Page1</a>
<li><a href="#page2"
class="ui-btn-active ui-state-persist"
data-icon="grid">Page2</a>
<li><a href="#page3" data-icon="gear">Page3</a>
</ul>
</div>
</div>
<div data-role="content">
<p>Page2</p>
</div>
<div data-role="footer">© keicode.com</div>
</div>
カスタムのアイコンを利用する
前述の通り jQuery Mobile には組み込みの（事前定義された）アイコンがいくつか用意されています。
これ以外のアイコンを使うには次のようにします。
data-icon 属性の値としてアイコン特有の名前を定義します (例. my-foo)。そして、 この名前に ui-icon- をつけた名前の CSS クラスを定義します。
例えば data-icon の属性として my-foo としたら、ui-icon-my-foo という名前の CSS クラスを定義します。
この ui-icon-my-foo の background 画像として指定した画像がアイコンとして利用されます。
<style>
.ui-icon-my-chat {
background:url(chat.png) no-repeat transparent;
border-radius: 0px;
box-shadow: 0px 0px 0px #000;
}
.ui-icon-my-tag {
background:url(tag.png) no-repeat transparent;
border-radius: 0px;
box-shadow: 0px 0px 0px #000;
}
.ui-icon-my-clock {
background:url(clock.png) no-repeat transparent;
border-radius: 0px;
box-shadow: 0px 0px 0px #000;
}
...
<div id="page3" data-role="page">
<div data-role="header">
<h1>navbar デモ</h1>
<div data-role="navbar">
<ul>
<li><a href="#page1" data-icon="my-chat">Page1</a>
<li><a href="#page2" data-icon="my-tag">Page2</a>
<li><a href="#page3"
class="ui-btn-active ui-state-persist"
data-icon="my-clock">Page3</a>
</ul>
</div>
</div>
...
上記コード例では、背景を透明にし、角の丸みをなくし、ボックスシャドーのオフセットを無くすことによって、 background 画像の内容をそのまま使うようにしてあります。