【プログラミング】jQueryのAccordionプラグインを使ってみた

プログラミングネタとしていますが、「新館」ネタでもあります。「新館」の「カメラの部屋」で、jQueryのAccordionプラグインを使って記事を読みやすくしてみました。もっと言えば、「カメラの部屋」の「ノート」において、日付別の記事を掲載していましたが、一度に全部表示するのではなく、一度に開いている記事は1個のみにして、クリックで記事を折りたたんだり開いたりとできるものです。

こんな感じです。

Shinkan_camera_03_2

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プラグインについて書いてきましたが、いずれは「ザ・公園」に組み込んで、公園紹介に使う予定です。どうぞお楽しみに(かな?)。

コメント