libro
www.tuyano.com
jQuery Mobileによるスマートフォン用Webサイト作成入門

より高度なGUI部品を使おう！ (5/5)

作成:2011-05-30 09:47
更新:2012-03-29 10:21

■jQuery UIでタブパネルを作る

jQuery UIを利用した例として、もう１つ「タブパネル」を作ってみましょう。タブパネルは、タブをクリックして表示を切り替えるGUIですね。スマートフォンでも同様の働きをするGUIはあります。タブパネルが画面に表示されても、それほど違和感はないでしょう。

下のリスト欄に、簡単なサンプルをあげておきます。アクセスすると、「No,1」「No,2」という２つのタブを持ったパネルが表示されます。もちろん、タブをクリックすれば表示を切り替えることができます。

タブパネルの表示は、ちょっと面倒です。あらかじめ指定された形式に従ってタグを用意して置かなければいけません。整理すると以下のような形になります。
<div id="タブパネルのID">
    <ul>
        <li><a href="#１つ目の表示">１つ目のタブ</a></li>
        <li><a href="#２つ目の表示"２つ目のタブ</a></li>
        ……必要なだけタブを用意……
    </ul>
    
    <div id="１つ目の表示" style="height:100px;">
        ……１つ目のタブの内容……
    </div>
    <div id="２つ目の表示" style="height:100px;">
        ……２つ目のタブの内容……
    </div>
    ……必要なだけ内容を用意……
</div>
タブパネルは、全体をまとめる<div>タグの中に、タブと、そこに表示する内容をそれぞれ組み込んでいきます。タブの部分は、<ul>タグの中に<li>タグとして記述をします。クリックしてタブを切り替えるために<a>タグを用意し、そのhrefにはタブの内容として表示する<div>タグのIDを指定します。こうした形で、タブの数だけ<li>タグを用意します。

タブで表示される内容は、<ul>タグの後に<div>タグなどで用意します。これは、特別な書き方はありません。ただ、タブに用意した<a>タグのhrefと表示する<div>のIDを揃えるだけです。<div>タグの中に、表示する内容をいろいろと組み込んでおけばよいわけですね。

こうしてタグが用意できたら、これらのタグをタブパネル化します。これを行っているのが、そのすぐ後にあるスクリプトの以下の文です。
$('#tabs').tabs({selected:0});
$()では、タブパネル全体をまとめている<div>タグのIDを指定します。「tabs」というメソッドが、タブパネル化するためのものです。引数には、必要な初期値を連想配列として渡します。ここでは、{selected:0}という値が用意されていますね。このselectedという値は、初期状態で選択されているタブのインデックス番号を示します。つまり、ここでは最初のタブが選択された状態で表示させているわけですね。


――以上、jQuery UIのGUI部品を使った例を挙げましたが、注意しておきたいのは「すべての部品が完全に動くと保証されているわけではない」という点でしょう。例えば、タブパネルはきちんと動きましたが、アコーディオンパネル（上下にタブが移動して表示するタイプ）は筆者の環境では正しく機能しませんでした。

jQuery UIに用意されているGUI部品のいくつかは、jQuery Mobile用に移植されているようですので、今後、正式にjQuery Mobileの部品として採用されるかも知れません。ここでは「jQuery UIの機能を使うこともある」という程度に考えておいてください。「動けばもうけもの」ってことですね！

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

	<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>Sample</title>
		
	<link rel="stylesheet" 
		href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script type="text/javascript" 
		src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" 
		src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css" />
	<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
	</head>
	
	<body>

	<div id="home" data-role="page">
		<div data-role="header">
			<h1>Hello</h1>
		</div>
		<div data-role="content">
			<div id="tabs">
				<ul>
				<li><a href="#tab1">No,1</a></li>
				<li><a href="#tab2">No,2</a></li>
				</ul>
				<div id="tab1" style="height:100px;">これは１つ目のタブ</div>
				<div id="tab2" style="height:100px;">これは２つ目のタブ</div>
			</div>
		</div>
		<script type="text/javascript">
		$('#tabs').tabs({selected:0});
		</script>
	</div>
		
	</body>
</html>
※関連コンテンツ

「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る