戻る

ナビゲーションバー

このサイトの仕様上、部品は目的の動作と異なることがあるので、ソースを活用してください。

ナビゲーションボタンにアイコンを表示する

<nav data-role="navbar">
	<ul>
		<li><a href="/info.php" data-icon="info" class="ui-btn-active">詳細</a></li>
		<li><a href="/list.php" data-icon="grid">一覧表示</a></li>
		<li><a href="/setting.php" data-icon="gear">設定</a></li>
	</ul>
</nav>

ボタンアイコンの表示位置を変える（１）―テキストの下に表示する

<nav data-role="navbar" data-iconpos="bottom">
	<ul>
		<li><a href="/info.php" data-icon="info" class="ui-btn-active">詳細</a></li>
		<li><a href="/list.php" data-icon="grid">一覧表示</a></li>
		<li><a href="/setting.php" data-icon="gear">設定</a></li>
	</ul>
</nav>

ボタンアイコンの表示位置を変える（２）―テキストの左に表示する

<nav data-role="navbar" data-iconpos="left">
	<ul>
		<li><a href="/info.php" data-icon="info" class="ui-btn-active">詳細</a></li>
		<li><a href="/list.php" data-icon="grid">一覧表示</a></li>
		<li><a href="/setting.php" data-icon="gear">設定</a></li>
	</ul>
</nav>

ボタンアイコンの表示位置を変える（３）―テキストの右に表示する

<nav data-role="navbar" data-iconpos="right">
	<ul>
		<li><a href="/info.php" data-icon="info" class="ui-btn-active">詳細</a></li>
		<li><a href="/list.php" data-icon="grid">一覧表示</a></li>
		<li><a href="/setting.php" data-icon="gear">設定</a></li>
	</ul>
</nav>

独自のアイコンを表示する

<nav id="custom" data-role="navbar">
	<ul>
		<li><a href="#" id="nav-btn-gs" data-icon="custom">ガソリンスタンド</a></li>
		<li><a href="#" id="nav-btn-rest" data-icon="custom">レストラン</a></li>
		<li><a href="#" id="nav-btn-bar" data-icon="custom">バー</a></li>
	</ul>
</nav>
<style>
.ui-btn-inner{
	padding-top:40px !important;
}
.ui-btn .ui-icon{
	width:30px !important;
	height:30px !important;
	margin-left:-15px !important;
	box-shadow:none !important;
	-moz-box-shadow:none !important;
	-webkit-box-shadow:none !important;
	-webkit-border-radius:0 !important;
	border-radius:0 !important;
}
#nav-btn-gs .ui-icon{
	background:url(icons/47-fuel.png) 50% 50% no-repeat !important;
	background-size:20px 24px !important;
}
#nav-btn-rest .ui-icon{
	background:url(icons/48-fork-and-knife.png) 50% 50% no-repeat !important;
	background-size:20px 24px !important;
}
#nav-btn-bar .ui-icon{
	background:url(icons/87-wine-glass.png) 50% 50% no-repeat !important;
	background-size:20px 24px !important;
}
</style>
inserted by FC2 system