jQueryUI

jQueryUIを使用すればお手軽にイイ感じのタブが使えます。
jQueryUIはjQuery公式の拡張ライブラリで、タブ・メニュー・アコーディオン等の部品やその他いろんなエフェクトなどが使えるようになりますが、 やはりjQuery用のものなのでjQueryMobileではほとんど使えません。実際に試してみて使えたものだけ紹介していきます。
※詳しい説明などは他サイト・書籍を見てください。

jQueryUIのサイトはこちら

 

Tabs

 

1.基本的な使用方法


画像1

画像2

画像3

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
								<script type="text/javascript" src="test1.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
							</head>
							<body>
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>sample</h1>
									</div>
									<div data-role="content">
										<!---タブ--------------->
										<div id="tabs">
											<ul>
												<li><a href="#tabs-1">tab1</a></li>
												<li><a href="#tabs-2">tab2</a></li>
												<li><a href="#tabs-3">tab3</a></li>
											</ul>
											<div id="tabs-1">
												<p>こんにちは</p>
											</div>
											<div id="tabs-2">
												<p>あああああ</p>
											</div>
											<div id="tabs-3">
												<p>画像とかもオッケーです</p>
												<img src="sumaho.png" />
											</div>
										</div>
									</div>
								</div>
							</body>
						</html>
					

 

【test1.jsに記述するコード】

						$(document).ready(function() {
							$( "#tabs" ).tabs();
						});
					

※上記内容を記述したtest1.js外部ファイルを用意しといてください。

 

まず上記HTMLコードのhead部分のように、jQueryUI、jQueryMobile用CSSの順でCSSを読み込ませます。
jsファイルはjQuery、jQueryUI、test1.js、jQueryMobileの順です。
公式サイトで各ファイルをダウンロードして使うのもオッケーですが、いつも通りCDNで読み込ませます(必ず最新バージョンのものを使ってください)。

あとはHTMLコード21~37行目のように、id="tabs"を追加したdivで囲んだ中に、ul,liタグ,各タブidへのリンクをつけて各タブを設定し、 各タブの内容をその下に記述します(画像1、2)。
タブタイトル内の文字数が多いと画像3のようにレイアウトが崩れてしまいます。 つか、3文字くらいしか入らないかもです。

 

 

2.デザイン少し変更

ガチでいくならCDNではなくファイルダウンロードして、jQueryUI用CSSの中を編集した方がいいかもです。
今回はCDNで読み込みつつ、ちょっと色変えたい場合についてご紹介します。


画像4

画像5

【css1.cssに記述する内容】

						/*---1---*/
						.ui-widget-header{
							background:#57b280;
						}
						/*---2---*/
						.ui-widget-content{
							background:#f9fa9a;
						}
						/*---3---*/
						.ui-tabs .ui-tabs-nav li{
							background:#57b280;
						}
						/*---4---*/
						.ui-tabs .ui-tabs-nav li.ui-tabs-active{
							background:#f9fa9a;
						}

						/*---タブタイトル文字の色変更---*/
						.ui-tabs .ui-tabs-nav li a:link{
							color:#FFFFFF;
							text-shadow:none;
						}
						.ui-tabs .ui-tabs-nav li a:hover{
							color:#000000;
						}
						.ui-tabs .ui-tabs-nav li.ui-tabs-active a:link{
							color:#000000;
						}
					

※上記内容を記述したcss1.cssファイルを作成し、HTMLのhead内において読み込ませてください。

css1の内容を適用したのが画像4になります。
またcss1内の番号(1~4)は画像5に示す各①~④部分になりますので、色を変更する時の参考にしてください。