jQuery UI逆引きリファレンス
アコーディオン・パネルの内容を外部ファイル化するには？
Accordionウィジェットのイベントやメソッドを利用しながら、アコーディオン・パネルの内容を外部ファイル化する方法を紹介。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
別稿「jQuery UI逆引きリファレンス： Accordionウィジェットでアコーディオン・パネルを生成するには？」では、Accordionウィジェットによる基本的なアコーディオン・パネルを作成する方法について紹介しました。本稿では、引き続きAccordionウィジェットのイベントやメソッドを利用しながら、アコーディオン・パネルの内容を外部ファイル化する方法を紹介していきます。具体的なコードは、以下のとおりです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Accordionウィジェット</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() {
$('#acc').accordion({
// 暫定的に異なるパネルを開いておく
active: $('#acc > div').length,
// 2パネル切替時に新しいパネルを非同期読み込み
beforeActivate: function(e, ui) {
var h = ui.newHeader;
var p = ui.newPanel;
if ($.trim(p.html()) === '') {
p.load('doc/' + h.attr('href'));
}
},
// 3パネル表示後にパネルをリフレッシュ
activate: function(e, ui) {
$(this).accordion('refresh');
}
})
// 4最後に目的のパネルを開く
.accordion('option', 'active', 2);
});
</script>
</head>
<body>
<!--1空のパネルを準備-->
<div id="acc">
<a href="backbone.html">Backbone.js</a>
<div data-file="backbone.html"></div>
<a href="knockout.html">Knockout</a>
<div data-file="knockout.html"></div>
<a href="knockout.html">Angular.js</a>
<div data-file="angular.html"></div>
</div>
</body>
</html>
|
|
<p>Backbone.jsはクライアントサイドMVCフレームワークの定番ライブラリの1つです。プレゼンテーションをView（ビュー）に、ビジネスロジック（ドメイン）をModel（モデル）に定義するスタイルで処理を記述します。</p>
<p>このことにより、コードの保守性、再利用性、テスト可能性などを向上させることができます。</p>
|
※knockout.html／angular.htmlファイルも同じ要領で記述できるので、紙面上は割愛します。
ポイントとなるのは、以下の点です。Tabsウィジェットの場合と異なり、AccordionウィジェットではAjax経由の取得をするために、いくらかの工夫が必要となります。
1コンテンツの取得先をhref属性で指定
Ajax経由でコンテンツを取得する場合、パネルを表す<div>要素は空にしておきます。その代わりに、ヘッダ要素をアンカー・タグ（＝<a>タグ）で表します。href属性は、コンテンツの取得先です。
2パネルを開いたときにファイルを読み込む
Accordionウィジェットには以下のようなイベントが用意されており、パネルの作成／切り替えのタイミングで独自の処理を差し挟めるようになっています。下記の表に示すプロパティは、イベント・リスナーの第2引数を経由してアクセスできるイベント固有の情報を表します（戻り値は、全てjQueryオブジェクト）。
| イベント名 | 発生タイミング プロパティ名 | |
|---|---|---|
| create | アコーディオン・パネルを最初に生成したとき | |
| header | アクティブなヘッダ | |
| panel | アクティブなパネル | |
| beforeActivate | パネルがアクティブになる前 | |
| newHeader | アクティブになったヘッダ | |
| oldHeader | 非アクティブになったヘッダ | |
| newPanel | アクティブになったパネル | |
| oldPanel | 非アクティブになったパネル | |
| activate | パネルがアクティブになった後 | |
| newHeader | アクティブになったヘッダ | |
| oldHeader | 非アクティブになったヘッダ | |
| newPanel | アクティブになったパネル | |
| oldPanel | 非アクティブになったパネル | |
サンプルでは、このうち、beforeActivateイベントを利用して、パネルを開くタイミングで、指定のファイルを読み込み、パネルに反映させています。
具体的には、新たに開くヘッダ（＝ui.newHeaderプロパティ）のattrメソッドで、リンク先（＝href属性）を取得し、これをキーにloadメソッドでパネル（＝ui.newPanelプロパティ）に反映させています。
ifブロックでパネルが空であるかどうかを判定しているのは、すでに一度開いているパネルであれば、再度読み込みの必要はないためです。
3アコーディオン・パネルをリフレッシュする
ただし、loadメソッドで外部ファイルを読み込んだだけでは、アコーディオン・パネルは正しく表示されません。というのも、パネルの高さがアコーディオンを初期化したときに決まってしまっているからです。
そこで、activateイベントのタイミング（＝パネルをアクティブにした後）で、refreshメソッドを呼び出します。これによって、パネルがリフレッシュされ、コンテンツを追加した後の高さが正しく認識されます。
なお、ウィジェットでは「メソッド」とはいっても、accordionメソッドの引数（キーワード）として渡す点に注意してください。ちなみに、accordionメソッドでは、refreshメソッドのほかにも、以下のようなメソッドを用意しています。
| メソッド | 概要 |
|---|---|
| accordion('destroy') | Accordion機能を解除（スタイルなども除去） |
| accordion('disable') | Accordion機能を無効化（グレーアウトし、選択不可に） |
| accordion('enable') | Accordion機能を有効化 |
| accordion('option', name) | 指定のパラメーター「name」を取得 |
| accordion('option', name, value) | 指定のパラメーター「name」を値「value」で設定 |
4アコーディオン・パネルを初期化
最後に、optionメソッドでactiveパラメーターを設定し、初期パネルを開きます。最初からactiveパラメーターを指定すればよいのでは、と思われた方もいるかもしれませんが、これは不可です。というのも、パネル初期化に際しては、beforeActivate／activateイベントが発生せず、外部ファイルが読み込まれないためです。そこでactiveパラメーターを変更してパネルを開き直すことで、強制的にbeforeActivate／activateイベントを発生させているのです。
※以下では、本稿の前後を合わせて5回分（第8回～第12回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
9. Accordionウィジェットでアコーディオン・パネルを生成するには？
タイトル部分をクリックすることでコンテンツが開閉するアコーディオン・パネルを実装できる「Accordionウィジェット」の基本的な使い方を説明する。
10. 【現在、表示中】≫ アコーディオン・パネルの内容を外部ファイル化するには？
Accordionウィジェットのイベントやメソッドを利用しながら、アコーディオン・パネルの内容を外部ファイル化する方法を紹介。
