jQuery Mobile 1.4のタブをカスタマイズしてタブらしいデザインにする方法

jQuery Mobile 1.4の新機能として追加されたタブ表示のための data-role=”tabs” は簡単なコーディングでタブレイアウトを実装出来るが、デフォルトのスタイルシートでの表示は、タブとしての機能にはなっていても、見た目としてはタブとイメージできない。

デフォルトCSSを使ったのサンプルページ

せっかくjQuery Mobile 1.4を導入してタブ仕様にするなら、スタイルシートをカスタマイズして「タブらしい」レイアウトにしたい。
jQuery Mobileへの指定の追加と少しのカスタムスタイルシートを追加することでサンプルのようなタブスタイルにすることが可能。

カスタマイズしたサンプルページ

設定方法

まずはベースとなるjquery mobile 1.4のスタイルシートを読み込む

CSS

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/>

javascriptを読み込む
スマートフォンやタブレットなどの新しいモバイル端末がターゲットならjquery 1.11よりも軽量のjquery 2.1がおススメ
jquery mobile は最新版の1.4.2

JAVASCRIPT

<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

タブの実装部分は以下

HTML

<div data-role="page" id="page1">
<div role="main" class="ui-content">
	<div data-role="tabs">
		<div data-role="navbar">
			<ul>
				<li><a href="#fragment-1">タブ1</a></li>
				<li><a href="#fragment-2">タブ2</a></li>
				<li><a href="#fragment-3">タブ3</a></li>
			</ul>
		</div><!-- navbar -->
		<div id="fragment-1">本文1</div>
		<div id="fragment-2">本文2</div>
		<div id="fragment-3">本文3</div>
	</div><!-- tabs -->
</div><!-- main -->
</div><!-- page -->

デフォルト状態でのタブならこれで完成。

ここからがカスタマイズ

まず、デザインをカスタマイズするため、data-role=”page” に data-theme=”none” を指定する。

HTML

<div data-role="page" id="page1" data-theme="none">

次にスタイルシート
jquery.mobile-1.4.2.min.css の後に読み込む

CSS

<style>
div[data-role=navbar] ul li a {
	color:#000;
	border-color:#ccc;
	border-width: 1px 1px 0px 1px;
}
li[aria-selected=false] {
	background-color: #eee;
	border-bottom:1px solid #ccc;
}
#fragment-3,#fragment-2,#fragment-1 {
	margin:-1px 3px 0px 0px;
	padding:11px 10px 10px 10px;
	border:1px solid #ccc;
	border-width: 0px 1px 1px 1px;
}
@media screen and (min-width: 321px) {
	#fragment-3,#fragment-2,#fragment-1 {
		margin:-1px 2px 0px 0px;
	}
}
@media screen and (min-width: 641px) {
	#fragment-3,#fragment-2,#fragment-1 {
		margin:-1px 0px 0px 0px;
	}
}
</style>

これだけで、タブらしいデザインにカスタマイズ出来る

補足説明

#fragment-3,#fragment-2,#fragment-1の指定にある

margin:-1px 3px 0px 0px;

は本文ボックスの右の縦罫線を揃えるためのおまじない

ウィンドウサイズによってズレの幅が違うからmin-widthで振り分け調整している。

@media screen and (min-width: 321px) {
	#fragment-3,#fragment-2,#fragment-1 {
		margin:-1px 2px 0px 0px;
	}
}
@media screen and (min-width: 641px) {
	#fragment-3,#fragment-2,#fragment-1 {
		margin:-1px 0px 0px 0px;
	}
}

スマートに出来る方法があったらコメントして貰えると嬉しい