ナビゲーションバーを表示

ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よく利用するコンテンツへのリンクをメニューとして常時表示すれば、操作性の向上になります。

ナビゲーションバーに設定できる属性一覧
設定対象	名称="設定値"(太字はデフォルト)	説明
ウィジェット	data-role="navbar"	ナビゲーションバー
項目	data-icon="アイコン名称"	リンクに表示するアイコン
項目	data-iconpos="top\|bottom\|left\|right\|notext"	アイコンの位置
ウィジェット、項目	data-theme="テーマ名称"	テーマ(ヘッダ、フッタ、リンクに設定できる)

ナビゲーションバーの構造

ナビゲーションバーは画面の幅いっぱいに表示されて、リンク先はその幅を均等に割った範囲内に納まるように表示されます。リンク先を表す文字列が長いときは末尾が"..."と表示されます。
HTML構造は以下の２点です。

１．ウィジェットの全体をdata-role="navbar"を追加したタグで囲む。
２．その内部に<ul>、<li>、<a>を表示するリンク先の数だけ追加する。

１行に表示できるのは最多で５つまでです。それ以上の数を設置使用すると１行に２つずつ表示されます。

表示中のページを明示する

ナビゲーションバーには、文字通りユーザーにコンテンツを案内する役目があり、その方法としては、リンク先だけではなく表示中のコンテンツを明示することも重要です。表示中のページのリンクを画面上に表すには、それを表すaタグに「class="ui-btn-active"」を追加します。

このclass属性は、ウィジェットが表示されるページそれぞれに対応させなくてはなりません。下記のサンプルコードのように、page1,page2のそれぞれのページで、ウィジェット内の同じページへのリンクにclass属性を設定する必要があります。この値はリンクをクリック・タップにより削除されて、ほかのリンクと同じ色に変わります。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile ナビゲーションバーを設定する</title>
	<link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css">
	<script src="../js/jquery-1.11.3.js"></script>
	<script src="../js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
	<section id="page1" data-role="page">
		<header data-role="header">
			<h1>page1</h1>
		</header>
		<article data-role="content">
		</article>
		<footer data-role="footer">
			<nav data-role="navbar">
			<ul>
				<li><a href="#page1">page1</a></li>
				<li><a href="#page2" class="ui-btn-active">page2</a></li>
				<li><a href="#page3">page3</a></li>
				<li><a href="#page4">page4</a></li>
			</ul>
			</nav>
		</footer>
	</section>

	<section id="page2" data-role="page">
		<header data-role="header">
			<h1>page2</h1>
		</header>
		<article data-role="content">
		</article>
		<footer data-role="footer">
			<nav data-role="navbar">
			<ul>
				<li><a href="#page1">page1</a></li>
				<li><a href="#page2">page2</a></li>
				<li><a href="#page3" class="ui-btn-active">page3</a></li>
				<li><a href="#page4">page4</a></li>
			</ul>
			</nav>
		</footer>
	</section>

</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryMobile ナビゲーションバーを設定する</title>

</head>

<body>

</header>

</article>

<ul>

</ul>

</nav>

</footer>

</section>

</header>

</article>

<ul>

</ul>

</nav>

</footer>

</section>

</body>

</html>

アイコンを表示する

ウィジェット内のリンクにはアイコンを表示することができます。設定時に利用するのは、data-icon,data-iconpos属性です。属性に設定できる値はボタンと同じです。これらは追加するタグが異なるので注意が必要です。

・<a>に追加する。それぞれのリンクに表示するアイコンを設定するのがdata-icon属性
・<nav>(<div>)に追加する。ウィジェット内の全てのリンクにおけるアイコンの表示位置を統一

data-iconpos属性が追加されない時は、アイコンが文字列の上に表示される。

テーマを設定する

ウィジェットのテーマは、それが作成されるヘッダ、フッタに設定する。ウィジェット内のリンクには、また別のテーマを設定できて、デフォルトでは、ウィジェットが配置されている場所(ヘッダ、フッタ、コンテンツ)のテーマと同じ設定となります。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile ナビゲーションバーにアイコンを表示させたり、テーマを設定する</title>
	<link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css">
	<script src="../js/jquery-1.11.3.js"></script>
	<script src="../js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
	<section id="page" data-role="page">
		<header data-role="header">
			<h1>page1</h1>
		</header>
		<article data-role="content">
		</article>

		<!-- footerでテーマを設定する -->
		<footer data-role="footer" data-theme="b">
			<!-- ウィジェット内リンクのアイコンの位置を統一 -->
			<nav data-role="navbar" data-iconpos="bottom">
			<ul>
				<!-- data-icon属性でアイコンを表示する  -->
				<li><a href="#page1" data-icon="grid" class="ui-btn-active">page1</a></li>
					<!-- リンクでテーマを設定する -->
				<li><a href="#page2" data-icon="info" data-theme="a">page2</a></li>
				<li><a href="#page3" data-icon="gear">page3</a></li>
				<li><a href="#page4" data-icon="check">page4</a></li>
			</ul>
			</nav>
		</footer>
	</section>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryMobile ナビゲーションバーにアイコンを表示させたり、テーマを設定する</title>

</head>

<body>

</header>

</article>

<ul>

</ul>

</nav>

</footer>

</section>

</body>

</html>