Movable Type 備忘録

 jQueryで記事内容をアコーディオンのように表示する

  • Jul032007
  • Vote:
    http://bizcaz.com/archives/2007/07/03-010201.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

こんばんわ^^

jQuery & Interface の機能を試しながら jQuery の記述になれていこうと思って、今回は記事内容をアコーディオンのように表示するカスタマイズやってみました。

アコーディオン・サンプル

アコーディオンの構造

Accordionの説明では、アコーディオンのタグ構造は以下のようになります。

  1. <dl id="myAccordion">
  2.     <dt>タブタイトル１</dt>
  3.         <dd>タブ１のコンテンツ</dd>
  4.     <dt>タブタイトル２</dt>
  5.         <dd>タブ２のコンテンツ</dd>
  6.     <dt>タブタイトル３</dt>
  7.         <dd>タブ３のコンテンツ</dd>
  8. </dl>

そして、わたしが作ったサンプルは以下のような構造になってます。

  1. <div id="accordion-container>
  2.     <h2>タブ１のタイトル</h2>
  3.     <div class="accordion-box">
  4.         <p>タグ１のコンテンツ</p>
  5.     </div>
  6.  
  7.     <h2>タブ２のタイトル</h2>
  8.     <div class="accordion-box">
  9.         <p>タグ２のコンテンツ</p>
  10.     </div>
  11.  
  12.     <h2>タブ３のタイトル</h2>
  13.     <div class="accordion-box">
  14.         <p>タグ３のコンテンツ</p>
  15.     </div>
  16. </div>

基本的にはどちらでも問題ないと思います。
お好み、用途によって使い分ければいいのではないかと (￣∇￣)b

スクリプトの使い方

アコーディオンのスクリプトは以下のようになってます。

  1. <script src="<$MTBlogURL$>js/jquery/jquery.js" type="text/javascript"></script>
  2. <script src="<$MTBlogURL$>js/jquery/interface/compressed/iutil.js" type="text/javascript"></script>
  3. <script src="<$MTBlogURL$>js/jquery/interface/compressed/accordion.js" type="text/javascript"></script>
  4.  
  5. <script type="text/javascript">
  6. $(document).ready(
  7.     function() {
  8.         $('#accordion-container').Accordion({
  9.                 headerSelector : 'h2.accordion-header',/*タブヘッダのタグ名 */
  10.                 panelSelector : 'div.accordion-block',/*タブパネルのタグ名 */
  11.                 activeClass : 'accordion-active', /*タブがアクティブ時のクラス名*/
  12.                 hoverClass : 'accordion-hover', /*ホバー時のクラス名 */
  13.                 panelHeight : 200, /*各パネルの高さ */
  14.                 speed : 400 /*スライドのスピード(ミリ秒) */
  15.         });
  16.     });
  17. </script>

上記スクリプトを HTML ヘッダ(<head>～</head>)に追加します。

カンタンにコメントしてますが、Accordionの説明の通りです。
onShow オプションと currentPanel オプションが思った動作しなかったのですが、わたしのやり方が悪かったのかな (;￣∇￣A

あと、基本的には CSS との組み合わせになるかと思いますが、padding には注意が必要です。
たとえば、わたしが作ったサンプルを例にすると、<div class="accordion-box">タグの属性に padding を付加すると変な挙動がでました。
可能な限り padding の使用は避けたほうが良さそうです。

何だかいつも以上に話がまとまってないような気もしますが･･･SEE YOU (●＞∀＜●)／

 Trackback Pings(0)

No trackbacks found.

 Comments(4)

#1: Posted by manma @ October 29, 2007 [REPLY]
user-pic

currentPanel オプションは、accordion.js の下記変更で動作するようです。

L.72
変更前）.eq(0)
変更後）.eq(el.accordionCfg.currentPanel)

L.154
変更前）.eq(0)
変更後）.eq(el.accordionCfg.currentPanel)

 
#2: Posted by Author Profile Page bzbell @ October 29, 2007 [REPLY]
user-pic

>>1 manma さん

こんばんわ^^

> currentPanel オプションは、accordion.js の下記変更で動作するようです。

ありがとうございます (●´∀｀●)
さっそく確認してみます♪

 
#3: Posted by かわぐち @ February 20, 2008 [REPLY]
user-pic

どうも、ご無沙汰しております。
最近、諸般の事情により、ブログを引っ越した川口です。あせあせ

現在のブログは、MovableTypeじゃないのですが、
大変、参考になるエントリーが、毎度の事ながらたくさんあって、
非常に感激しております。

んで、このエントリーを参考にして、早速導入してみました。

なんとか形にはなったんですが、
これ、IEだと、クリックした後に、
ブルブルしちゃうんですねぇ～。
ん～、私の設定の問題かな・・・。

新しいブログの方、よろしくお願いしま～す。チュ！

 
#4: Posted by Author Profile Page bzbell @ February 20, 2008 [REPLY]
user-pic

>>3 かわぐち さん

こんばんわ^^

> 最近、諸般の事情により、ブログを引っ越した川口です。

はい。今日お昼にブログの方遊びに行って知りました。
ホント突然でしたねあせあせ
リンク張り替えます。

> なんとか形にはなったんですが、
> これ、IEだと、クリックした後に、
> ブルブルしちゃうんですねぇ～。

はい。
そうなんです。でもね、CSS のスタイルで何とかなったように記憶してます。
何やったの･･･って聞かないでくださいあせあせ忘れました。
またイジくれば分かるかも、ですけどガーン

 

 Post a Comment

 

コメント用フィード