jQuery UI逆引きリファレンス
タブ・パネルの挙動をカスタマイズするには？
Tabsウィジェットのイベントやメソッドを利用しながら、タブ・パネルのさまざまな制御方法を紹介する。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
別稿「jQuery UI逆引きリファレンス： Tabsウィジェットでタブ・パネルを作成するには？」では、Tabsウィジェットによる基本的なタブ・パネルを作成する方法について紹介しました。本稿では、引き続きTabsウィジェットのイベントやメソッドを利用しながら、タブ・パネルのさまざまな制御方法を紹介していきます。
タブ・パネルの内容をAjaxで取得する
タブ・パネルの内容は、別ページに分離して、タブ変更時にAjax通信で動的に取得することもできます。これには、以下のようなコードを用意します。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tabsウィジェット</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#tabs').tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="tabs/backbone.html">Backbone.js</a></li>
<li><a href="tabs/knockout.html">Knockout.js</a></li>
<li><a href="tabs/angular.html">AngularJS</a></li>
</ul>
</div>
</body>
</html>
|
|
<p>Backbone.jsはクライアントサイドMVCフレームワークの定番ライブラリの1つです。プレゼンテーションをView（ビュー）に、ビジネスロジック（ドメイン）をModel（モデル）に定義するスタイルで処理を記述します。</p>
<p>このことにより、コードの保守性、再利用性、テスト可能性などを向上させることができます。</p>
|
※knockout.html／angular.htmlも同じ要領で記述できるので、紙面上は割愛します。
Ajax経由で取得する、とは言っても、特別なコードは必要ありません。別稿で示したtabs.htmlのコードを例にして説明すると、ページ内に記述していたパネルの内容を、独立した.htmlファイルとして切り出し、タブのリンク先も.htmlファイルにするだけです。これによって、タブの切り替え時に動的にパネルの内容だけが読み込まれるようになります。
Tabsウィジェットのイベントを監視する
Tabsに限らず、jQuery UIのウィジェットにはさまざまなイベントが用意されており、ウィジェットで決められた特定のタイミングで、独自の処理を差し挟めるようになっています。
例えば、Tabsウィジェットで提供されているイベントには、以下のようなものがあります。プロパティは、イベント・リスナーの第2引数を経由してアクセスできるイベント固有の情報を表します。
| イベント名 | 発生タイミング プロパティ名 | 概要 |
|---|---|---|
| activate | タブが変更されたとき（切り替えエフェクトの完了後） | |
| newTab | 新たにアクティブになったタブ | |
| oldTab | 非アクティブになったタブ | |
| newPanel | 新たにアクティブになったパネル | |
| oldPanel | 非アクティブになったパネル | |
| beforeActivate | タブが変更される直前 | |
| newTab | 新たにアクティブになったタブ | |
| oldTab | 非アクティブになったタブ | |
| newPanel | 新たにアクティブになったパネル | |
| oldPanel | 非アクティブになったパネル | |
| beforeLoad | リモート・タブがロードされる直前 | |
| tab | ロードされるタブ | |
| panel | 読み込み結果を反映するパネル | |
| jqXHR | Ajax通信に利用したjqXHRオブジェクト*1 | |
| ajaxSettings | Ajax通信で利用する設定 | |
| create | タブが作成されたとき | |
| tab | アクティブなタブ | |
| panel | アクティブなパネル | |
| load | モート・タブがロードされたとき | |
| tab | ロードされたタブ | |
| panel | 読み込み結果を反映するパネル | |
- *1 jqXHRオブジェクトとは、jQuery固有の機能を追加したXMLHttpRequestオブジェクトです。
イベント・リスナーは、tabsメソッドを呼び出す際に、パラメーターの一部として登録できます。具体的には、下記のコードのようにして登録します。
|
$(...).tabs({
イベント名: function(e, ui) {
// イベントに対応する処理
},...
});
|
例えば以下は、Ajax経由でのタブ読み込みが失敗した場合に、パネルにエラー・メッセージを表示するコード例（と、その実行結果）です。
|
<script type="text/javascript">
$(function() {
$('#tabs').tabs({
beforeLoad: function(e, ui) {
ui.jqXHR.fail(function() {
$('<p>コンテンツの読み込みに失敗しました。</p>')
.css('color', 'Red')
.appendTo(ui.panel);
});
}
});
});
</script>
……中略……
<div id="tabs">
<ul>
<li><a href="tabs/backbone.html">Backbone.js</a></li>
<li><a href="tabs/knockout.html">Knockout.js</a></li>
<li><a href="tabs/angular.html">AngularJS</a></li>
<!--存在しないページへのリンク-->
<li><a href="tabs/nothing.html">Nothing</a></li>
</ul>
</div>
|
Ajax通信で発生したエラーを捕捉するには、jqXHRオブジェクトのfailメソッドを利用します。jqXHRオブジェクトは、イベント・リスナーの第2引数（ここでは「ui」）からjqXHRプロパティにアクセスすることで、取得できます。
failイベント・リスナーでは、エラー・メッセージを生成し、これをパネルに反映させています。対象のパネルには、同じくui.panelプロパティでアクセスできます。
タブ・パネルをJavaScriptから操作する
タブ・パネルは、JavaScriptコードから動的に操作することも可能です。例えば、以下ではリンクをクリックすることで、タブ・パネルの外からタブを切り替える例です。
|
<script type="text/javascript">
$(function() {
var ts = $('#tabs');
ts.tabs();
$('#link > a').click(function(e) {
ts.tabs('option', 'active', $(this).data('key'));
});
});
</script>
……中略……
<div id="tabs">
<ul>
<li><a href="#backbone">Backbone.js</a></li>
<li><a href="#knockout">Knockout.js</a></li>
<li><a href="#angular">AngularJS</a></li>
</ul>
……中略……
</div>
<div id="link">
［<a href="JavaScript:void()" data-key="0">Backbone.js</a>］
［<a href="JavaScript:void()" data-key="1">Knockout.js</a>］
［<a href="JavaScript:void()" data-key="2">AngularJS</a>］
</div>
</body>
</html>
|
JavaScriptコード側からタブを切り替えるには、optionメソッドでactiveパラメーター（＝アクティブなタブ）を切り替えます。
optionメソッドとは言っても、見掛けはtabsメソッドに対して渡すオプション（＝引数）のような形式で呼び出します。上の例であれば、
|
ts.tabs('option', 'active', $(this).data('key'));
|
でTabsウィジェットのoptionメソッドを呼び出していることになります。
第1引数でメソッド名を、第2引数でメソッドの呼び出しに必要な引数を指定します。この例であれば、設定するオプション（＝パラメーター）の名前、設定値を、第2、3引数として渡しています。
dataメソッドは、対象の要素（ここではクリックされたアンカー・タグ）のdata-xxxxx属性を取得します。この例であれば、あらかじめアンカータグのdata-key属性にパネル番号（「0」～「2」）を設定しておき、その値を基にタブを切り替えています。
タブを動的に追加する
JavaScriptコードから動的にタブを追加することもできます。例えば以下は、［タブ追加］ボタンをクリックすることで、Tabsウィジェットに［Add1］［Add2］のようなタブを追加していく例（コードと実行結果）です。
|
<script type="text/javascript">
$(function() {
var count = 1; // 追加したタブの個数
var ts = $('#tabs');
ts.tabs();
$('#add').click(function() {
// タブ＆パネルを追加
$('ul', ts).append('<li><a href="#add'
+ count + '">Add' + count + '</a></li>');
ts.append('<div id="add' + count + '">追加コンテンツ' + count + '</div>');
// Tabsウィジェットをリフレッシュ
ts.tabs('refresh');
count++;
});
});
</script>
……中略……
<button id="add">タブ追加</button>
<div id="tabs">
……中略……
</div>
|
［タブ追加］ボタンをクリック
タブ・パネルを追加するには、まずappendメソッドなどで、構成する<li>／<div>要素をドキュメント・ツリーに追加します。ただし、これらの操作は、そのままではウィジェットが認識できません（次の画面はその例で、上で示した実行結果のように、タブ・パネルが正常に表示されていません）。
そこでrefreshメソッドを呼び出して、Tabsウィジェットをリフレッシュするのです。これによって、正しくタブ・パネルが動作します。
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
2. DatePickerウィジェットで日付選択ボックスを作成するには？
日付選択ボックスを実装するためのjQuery UIウィジェット「DatePicker」の基本的な使い方を説明。オプションにより、挙動や見栄えをさまざまにカスタマイズできる。
3. Tabsウィジェットでタブ・パネルを作成するには？
パネルの端に配置されたタブで内容を切り替えられるタブ・パネルを簡単に実装できる、jQuery UIのTabsウィジェットの基本的な使い方を説明する。
4. 【現在、表示中】≫ タブ・パネルの挙動をカスタマイズするには？
Tabsウィジェットのイベントやメソッドを利用しながら、タブ・パネルのさまざまな制御方法を紹介する。
