プログラミングネタとしていますが、「新館」ネタでもあります。「新館」の「カメラの部屋」で、jQueryのAccordionプラグインを使って記事を読みやすくしてみました。もっと言えば、「カメラの部屋」の「ノート」において、日付別の記事を掲載していましたが、一度に全部表示するのではなく、一度に開いている記事は1個のみにして、クリックで記事を折りたたんだり開いたりとできるものです。
こんな感じです。
Accordionプラグインの使い方はすごく簡単で、ここの記事で書いたように、bodyのonloadイベントにAccirdionメソッドを呼び出すように登録します。
<script type="text/javascript">
//<![CDATA[
// ノートのアコーディオン設定を行う。
function setupNoteAccordion() {
$(‘div.note_accordion’).accordion({ animated: ‘bounceslide’, autoHeight: false });
$(‘div.note_accordion’).css(‘display’, ‘block’);
}
addOnloadEvent(function () { setupNoteAccordion(); });
// ノートの写真をポップアップする。
function setupNoteImage() { $(‘a.noteimage’).fancybox(); }
addOnloadEvent(function () { setupNoteImage(); });
//]]>
</script>
ノートにある写真をクリックしたら、同じくjQueryのプラグインであるFancyboxを用いて写真がポップアップするようにもしています。また、スタイルシートを2つ取り込んでいます。ひとつめは、Accordionプラグインが参照するもので、もうひとつがFancyboxのものです。ui-lightnessというのは明るい感じの色調になりますが、darknessなどを選べば黒基調になります。このあたりは、jQueryの組み込みテーマの話になるので詳細は割愛します。
<link href="../js/themes/ui-lightness/ui.all.css" rel="stylesheet" type="text/css" />
<link href="../js/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
以下は、ScriptManagerProxyコントロールのようすです。Accordionプラグインのための特別なスクリプトは不要です。jQuery UIのスクリプトを組み込むようにすればOKです。
<asp:ScriptManagerProxy id="smp" runat="server">
<scripts>
<asp:ScriptReference Path="../js/utils.js"></asp:ScriptReference>
<asp:ScriptReference Path="../js/jquery-1.3.2.min.js"></asp:ScriptReference>
<asp:ScriptReference Path="../js/ui/jquery-ui-1.7.custom.js"></asp:ScriptReference>
<asp:ScriptReference Path="../js/fancybox/jquery.easing-1.3.pack.js"></asp:ScriptReference>
<asp:ScriptReference Path="../js/fancybox/jquery.fancybox-1.3.1.js"></asp:ScriptReference>
</scripts>
</asp:ScriptManagerProxy>
さて、どのようにタグを構成すればAccordionプラグインの効果が有効になるかということですが、非常に簡単です。まず、Accordionプラグインの適用対象となるdiv要素を作ります。このdiv要素には、適当なIDかクラスを設定して下さい。冒頭のコードでは、「note_accordion」というクラスを指定しています。
<div class="note_accordion" style="display: none;">
<asp:Literal ID="ltrNote" runat="server"></asp:Literal>
</div>
div要素の中にはLiteralサーバコントロールがありますが、ここを具体的なタグに置き換えています。また、displayスタイルをnoneにしているのは、初期状態では非表示にして、要素読み込み終了、スタイルの適用完了後に表示するためです。そうでないと、最初はすべて開いた状態で表示されてしまい、見てくれが悪いからです。
個々の蛇腹（Accordionだからこう言った方がよいのでしょうか）は、こんな感じで作ります。
<h3><a href="#">title</a></h3>
<div>
<p>
………
</p>
</div>
titleの部分が蛇腹の見出しになります。………の部分が、蛇腹の中身になります。テキストはもちろん、画像を入れても、表を入れてもアコーディオンします。蛇腹のヒダの数だけ繰り返します。
冒頭の、Accordionメソッドの呼び出しでは、引数をいくつか渡しています。animatedはアニメーション効果を指定しますが、bounceslideを指定して、クリックして折りたたんだり開いたりする際に、弾むような効果を付けています。autoHeightは高さの自動調整ですが、falseを指定して自動調整をナシにしています。これで、内容に応じた高さになります。
ざっと、Accordionプラグインについて書いてきましたが、いずれは「ザ・公園」に組み込んで、公園紹介に使う予定です。どうぞお楽しみに（かな？）。
コメント