jQuery Mobile逆引きリファレンス
Tabsウィジェットでタブパネルを作成するには？
パネルの端に配置されたタブをクリックするとパネル内容が切り替わるUIを、jQuery MobileのTabsウィジェットで手軽に作成する方法を解説。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
jQuery Mobileでタブパネルを利用するには、Tabsウィジェットを利用します。タブパネルとは、パネルの端（基本的に上端）に配置されたタブをクリックすることで（もしくはマウスポインターを当てることで）パネルの内容を切り替えられる、定型的なUIの1つです。
Tabsウィジェットの基本
例えば以下は、［Backbone.js］／［Knockout.js］／［AngularJS］という3つのタブを持つ、基本的なタブパネルのコード例（と、その実行結果の画面）です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<!--3タブパネル全体を定義-->
<div id="tabs" data-role="tabs">
<!--2タブリストを準備-->
<div data-role="navbar">
<ul>
<li><a href="#backbone" class="ui-btn-active">Backbone.js</a></li>
<li><a href="#knockout">Knockout.js</a></li>
<li><a href="#angular">AngularJs</a></li>
</ul>
</div>
<!--1パネル（コンテンツ領域）を準備-->
<div id="backbone" class="ui-body ui-body-a">
<p>Backbone.jsは...</p>
</div>
<div id="knockout" class="ui-body ui-body-a">
<p>Knockoutは...</p>
</div>
<div id="angular" class="ui-body ui-body-a">
<p>Angular.jsは...</p>
</div>
</div>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
［Knockout.js］タブをタップ
まず、パネル（＝コンテンツ領域）は<div>要素で表します（1）。コンテンツ領域であることが分かるように、class属性には「ui-body」と、テーマ（ここでは「ui-body-a」なので、スウォッチ「a」）を指定しておきます。あとからコンテンツを識別できるように、id属性は必須です。
続いて、タブ部分を表すにはNavbarウィジェットを利用します（Navbarウィジェットについては、別稿「Navbarウィジェットでナビゲーションバーを作成するには？」を参照（2））。この際、リンク先として、対応するパネル（＝<div>要素）のid値を「#id」の形式で指定します。なお、現時点では、アクティブなタブに自動でスタイルが適用されませんので、アクティブなタブには、手動で「class="ui-btn-active"」属性を付与しています（ここでは［Backbone.js］タブ）。
最後に、タブとパネル全体を、<div data-role="tabs">要素でくくって出来上がりです（3）。
［Note］利用可能なパラメーター
パネル領域を別ファイルにする
パネル領域を外部ファイルに分離することもできます。もっとも、これには特別な手順は不要で、パネル要素を別ファイルに切り出した上で、タブからのリンクを「#id」ではなく、ファイル名にするだけです。
以下のコードで、分離前と同じ結果を得られることを確認してください。
|
<div id="tabs" data-role="tabs">
<div data-role="navbar">
<ul>
<li><a href="backbone.html" class="ui-btn-active"
data-ajax="false">Backbone.js</a></li>
<li><a href="knockout.html" data-ajax="false">Knockout.js</a></li>
<li><a href="angular.html" data-ajax="false">AngularJs</a></li>
</ul>
</div>
</div>
|
|
<div id="knockout" class="ui-body ui-body-a">
<p>Knockout は...</p>
</div>
|
※backbone.html、angular.htmlも同じなので、省略しています。
※以下では、本稿の前後を合わせて5回分（第8回～第12回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
8. jQuery Mobileページでアイコン付きのボタンを配置するには？
jQuery Mobileページでボタンを設置する方法について説明。今回は、アイコン付きのボタンをレイアウトする方法を解説する。
9. Navbarウィジェットでナビゲーションバーを作成するには？
アプリ共通のリンクやコマンドボタンなどを配置するために使われるナビゲーションバーを、jQuery MobileのNavbarウィジェットで手軽に作成する方法を解説する。
10. 【現在、表示中】≫ Tabsウィジェットでタブパネルを作成するには？
パネルの端に配置されたタブをクリックするとパネル内容が切り替わるUIを、jQuery MobileのTabsウィジェットで手軽に作成する方法を解説。
12. Popupウィジェットでポップアップを表示するには？
ツールヒント／ダイアログ／ポップアップメニューなどのポップアップを、jQuery MobileのPopupウィジェットで手軽に作成する方法を解説する。
