Movable Type 備忘録

 prototypeで記事内容をアコーディオンのように表示する（Accordion.js）

  • Jul182007
  • Vote:
    http://bizcaz.com/archives/2007/07/18-212835.php
  • Categories: prototype
  • Tags:
  • Social Bookmark

こんばんわ^^

姪っ子は 'One Peace' が大好きです。
姪っ子から「'One Peace' 見てね」と言われておりまして、毎週(日曜朝9:30～)欠かさず録画してます (;￣∇￣A

見ておかないと、抜き打ちで遊びに来る姪っ子が、忘れた頃に 'One Peace' の質問してくるので侮れません（つω-`｡）

先週分は先ほど見終わりました。
ちょっとした 'One Peace' ネタならついていけるくらいにまで成長!? した bzbell です (●´∀｀●)

ちなみに、朝9:00～は 'ゲゲゲの鬼太郎' やってます。今風です。
ついでに録画してまして、先週は '目玉おやじ' がジャグジー(炭酸のジュース)に入ってました♪

さて、今回は久しぶりに prototype を使ったカスタマイズのご紹介です。
youmos さんのところで、折りたたみできるコンテンツ表示JavaScript （Accordion.js）という記事が紹介されてたので、以前、わたしのサイトで紹介しました、jQueryで記事内容をアコーディオンのように表示すると比較してみました。

ここでは記事内容をアコーディオンのように･･･と言っていますが、サイドバーで使用してもいいと思います (￣∇￣)b まずはサンプルですね。

見比べると違いが分かりますね。
見ため上では jQuery 版の方は各パネル(コンテンツ)の高さが固定されています。 でも、Prototype 版の方は高さが可変となっています。

ディレクトリ構成

今回は以下のようなディレクトリ構成になります。

  1. http://●●●.com/
  2.   |
  3.   +-- js/
  4.   | +-- prototype/
  5.   | | +-- accordion/
  6.   | | | +-- accordion.js
  7.   | | | +-- effect.js
  8.   | | |
  9.   | | +-- prototype.js
  10.   | |

アコーディオンの構造

アコーディオンの構造は、jQueryで記事内容をアコーディオンのように表示するで紹介した構造といっしょです。

  1. <div id="accordion_container>
  2.     <h2 class="accordion_toggle">パネル１のタイトル</h2>
  3.     <div class="accordion_content">
  4.         <p>パネル１のコンテンツ</p>
  5.     </div>
  6.  
  7.     <h2 class="accordion_toggle">パネル２のタイトル</h2>
  8.     <div class="accordion_content">
  9.         <p>パネル２のコンテンツ</p>
  10.     </div>
  11.  
  12.     <h2 class="accordion_toggle">パネル３のタイトル</h2>
  13.     <div class="accordion_content">
  14.         <p>パネル３のコンテンツ</p>
  15.     </div>
  16. </div>

オブジェクトの説明

accordion.js の使い方をカンタンに説明します。上記アコーディオンの構造を元に説明します。

  1. /*accordion オブジェクト生成*/
  2. var acobj = new accordion('#accordion_container', {
  3.     classNames : {
  4.         toggle : 'accordion_toggle', /*パネルヘッダのタグ名称 (任意)*/
  5.         toggleActive : 'accordion_active', /*パネルがアクティブな時のクラス名称(任意)*/
  6.         content : 'accordion_content' /*パネルのコンテンツタグ名称 (任意)*/
  7.     },
  8.     defaultSize : {
  9.         width : 600, /*パネルの横幅(px) (任意)*/
  10.         height: null /*パネルの高さ(px) (任意)*/
  11.     },
  12.     resizeSpeed : 8, /*スライドの速さ (任意)*/
  13.     direction : 'vertical' /*アコーディオンの方向 (任意)*/
  14.                                            /* vertical: 縦方向 */
  15.                                            /* horizontal:横方向 */
  16. });

  • classNames:toggle
    パネルヘッダのタグ名称を指定します。省略することもできます。
    デフォルトでは、'accordion_toggle' となっているようです。

  • classNames:toggleActive
    アクティブとなっているパネルヘッダのクラス名称を指定します。省略可能です。

  • classNames:content
    パネルのコンテンツのタグ名称を指定します。こちらも省略可能です。
    デフォルトでは 'accordion_content' になっているようです。

  • defaultSize:width/height
    パネルの幅および、高さを指定します。省略可能です。
    デフォルトでは 'null' になってます。

  • resizeSpeed
    各パネルのスライドの速さを指定します。省略可能です。
    たぶん、デフォルトは '8' だと思います。

  • direction
    スライドの方向を指定します。省略可能です。
    デフォルトでは縦方向( 'vertical' )のようです。横方向にスライドさせたい場合には 'horizontal' を指定します。

使い方

  1. まず、必要な JavaScript をダウンロードします。
    以下のサイトから accordion.zip ファイルを入手します。

    prototype.js は Ver1.5.1.1 が同梱されてました。
    入手したら適当なフォルダに展開して、上記ディレクトリ構成のようにアップロードします。

  2. 次に HTML ヘッダ(<head>～</head>)に以下を追加します。

    HTML ヘッダに追加

    1. <script type="text/javascript" src="<$MTBlogURL$>js/prototype/prototype.js"></script>
    2. <script type="text/javascript" src="<$MTBlogURL$>js/prototype/accordion/effects.js"></script>
    3. <script type="text/javascript" src="<$MTBlogURL$>js/prototype/accordion/accordion.js"></script>
    4. <script type="text/javascript">
    5.     Event.observe(window, 'load', loadAccordions, false);
    6.  
    7.     function loadAccordions() {
    8.         var acobj = new accordion('#accordion_container');
    9.         acobj.activate($$('#accordion_container .accordion_toggle')[0]);
    10.     }
    11. </script>

    青い字の部分を各自のサイトに合わせて変更します。
    赤い字の部分は「オブジェクトの説明」で説明した各プロパティを省力した形になります。 各自の好みで変更したい場合には、先ほど説明したようにお好みで指定します。

    緑の字の部分で最初に表示したいパネルの番号になります。パネル番号は '0' からとなります。

    - 2007.07.20 追記 -

    こちらのカスタマイズで使用している effect.js はこちらの script.aculo.us の effect.js を使用してました。
    ですので、既に scriptaculous.js をロード済みまたは、effects.js をロード済みの人は改めて effect.js をロードする必要ありません。

    oscar さんご連絡ありがとうございます (￣∇￣)/

  3. 最後に「アコーディオンの構造」で説明したタグ構成で記事を書いていけば完了です (￣∇￣)b

以上で prototype を使ってアコーディオンのように表示することができました。
サンプルも付いてますし、説明もありますので問題なく設置できると思いますよ♪

 Trackback Pings(1)

from K´s Labo

皆さ〜ん、とても暑いですね〜。如何お過ごしですか〜？私はと言いますと、昨日（8...

Tracked on August 16, 2007

 Comments(6)

#1: Posted by oscar @ July 18, 2007 [REPLY]
user-pic

こんばんは、夏休み中の季節感なし男です。
アコーディオン・エフェクト良いなぁと眺めていたんですが、やっと使えます。って使うところあるのか？
私のところは、prototype+scriptaculousなので、あきらめてたんですよ。

それでbzbellさん、スクリプトのうちeffects.jsは、scriptaculousの一部なんで、その事追記しといたほうが良いと思います。scriptaculousをload指定無しで読み込んでる場合、effects.jsも自動的に読み込まれますし、大抵はeffects.jsのみのloadが多いようですから。

 
#2: Posted by bzbell @ July 19, 2007 [REPLY]
user-pic

>>1 oscar さん

こんばんわ^^

> スクリプトのうちeffects.jsは、scriptaculousの一部なんで、その事追記しといたほうが良いと思います。

あっ、ホントですね (ﾟ∀ﾟ； )
コード見ればすぐに分かることですね。

そういえば先日、scriptaculous がバージョンアップされたのを教えてもらって、こちら(http://bizcaz.com/archives/2006/08/27-192539.php)の記事に追記した時に effect.js 使ったの忘れてました (;￣∇￣A

ありがとうございます。

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

ども、お久しぶり、ぶり、のかわぐちです。
いつもながら、たいへん勉強になりますね～。

私もMT4のリリースに合わせて、いろいろと計画してたんですが、
リリースが延期になっちゃって、ちょっとその勢いも
トーンダウン気味の毎日です。

>目玉おやじ' がジャグジー(炭酸のジュース)に
ってことは、人間で言うと、
風呂の中に「バブ」を大量に入れたみたいなもんでしょうか？
すいません。戯言でした。

 
#4: Posted by bzbell @ July 21, 2007 [REPLY]
user-pic

>>3 かわぐち さん

こんばんわ^^

> リリースが延期になっちゃって、ちょっとその勢いも
> トーンダウン気味の毎日です。

ですね。
わたしはプラグインの動作確認に疲れてしまって、今放置プレイです (;￣∇￣A
メッチャ時間かかるんだもん（*ﾉД`*）

> 風呂の中に「バブ」を大量に入れたみたいなもんでしょうか？

バブって使ったことないんですけど、アワアワ、ブクブクするんですか!?
だとしたらそんなかんじです (●´∀｀●)

 
#5: Posted by conan @ July 3, 2008 [REPLY]
user-pic

カスタマイズサンプルを入れて頂いているのはいいのですが結構サンプルが正常に作動しないのが
ありますね？
コメントの中のかわぐちさんのところのようにカスタマイズしたいと思いますので
また、お時間のある時にでもエントリー宜しくお願いしますあせあせ

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

>>5 conan さん

こんにちわ^^

> カスタマイズサンプルを入れて頂いているのはいいのですが結構サンプルが正常に作動しないのが
> ありますね？

あぁ～あるかもしれませんねグウグウぜんぜんメンテしてませんのであせあせ
具体的になんのカスタマイズ・サンプルを見たいですか!?

こちらの記事のサンプルは動作してるようですあせあせ

 

 Post a Comment

 

コメント用フィード