Movable Type 備忘録

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

Jul182007
Author: bzbell
Categories: Customize
Tags: JavaScript, prototype

Next Page: パイ・チャートを表示してみる（amCharts）
Prev Page: IE6 で min-width、max-width を実装する２

こんばんわ^^

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

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

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

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

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

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

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

ディレクトリ構成

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

http://●●●.com/
|
+-- js/
|    +-- prototype/
|    |    +-- accordion/
|    |    |    +-- accordion.js
|    |    |    +-- effect.js
|    |    |
|    |    +-- prototype.js
|    |

アコーディオンの構造

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

<div id="accordion_container>
<h2 class="accordion_toggle">パネル１のタイトル</h2>
<div class="accordion_content">
<p>パネル１のコンテンツ</p>
</div>
<h2 class="accordion_toggle">パネル２のタイトル</h2>
<div class="accordion_content">
<p>パネル２のコンテンツ</p>
</div>
<h2 class="accordion_toggle">パネル３のタイトル</h2>
<div class="accordion_content">
<p>パネル３のコンテンツ</p>
</div>
</div>

オブジェクトの説明

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

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

classNames:toggle
パネルヘッダのタグ名称を指定します。省略することもできます。
デフォルトでは、'accordion_toggle' となっているようです。
classNames:toggleActive
アクティブとなっているパネルヘッダのクラス名称を指定します。省略可能です。
classNames:content
パネルのコンテンツのタグ名称を指定します。こちらも省略可能です。
デフォルトでは 'accordion_content' になっているようです。
defaultSize:width/height
パネルの幅および、高さを指定します。省略可能です。
デフォルトでは 'null' になってます。
resizeSpeed
各パネルのスライドの速さを指定します。省略可能です。
たぶん、デフォルトは '8' だと思います。
direction
スライドの方向を指定します。省略可能です。
デフォルトでは縦方向( 'vertical' )のようです。横方向にスライドさせたい場合には 'horizontal' を指定します。

使い方

まず、必要な JavaScript をダウンロードします。
以下のサイトから accordion.zip ファイルを入手します。
- Accordion v1.0
prototype.js は Ver1.5.1.1 が同梱されてました。
入手したら適当なフォルダに展開して、上記ディレクトリ構成のようにアップロードします。
次に 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);
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 さんご連絡ありがとうございます (￣∇￣)/
最後に「アコーディオンの構造」で説明したタグ構成で記事を書いていけば完了です (￣∇￣)b

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

Trackback Pings(1)

TrackBack URL for this entry:

from K´s Labo: 皆さ〜ん、とても暑いですね〜。如何お過ごしですか〜？私はと言いますと、昨日（8...
Tracked on August 16, 2007

Comments(4)

#1: Posted by oscar [RES]

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

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

Posted on July 18, 2007

#2: Posted by bzbell [RES]

>>1 oscar さん

こんばんわ^^

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

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

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

ありがとうございます。

Posted on July 19, 2007