Movable Type 備忘録
prototypeで記事内容をアコーディオンのように表示する(Accordion.js)
- Next Page: パイ・チャートを表示してみる(amCharts)
- Prev Page: IE6 で min-width、max-width を実装する2
こんばんわ^^
姪っ子は '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">パネル1のタイトル</h2>
<div class="accordion_content">
<p>パネル1のコンテンツ</p>
</div>
<h2 class="accordion_toggle">パネル2のタイトル</h2>
<div class="accordion_content">
<p>パネル2のコンテンツ</p>
</div>
<h2 class="accordion_toggle">パネル3のタイトル</h2>
<div class="accordion_content">
<p>パネル3のコンテンツ</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 ファイルを入手します。prototype.js は Ver1.5.1.1 が同梱されてました。
入手したら適当なフォルダに展開して、上記ディレクトリ構成のようにアップロードします。次に HTML ヘッダ(<head>~</head>)に以下を追加します。
HTML ヘッダに追加
<script type="text/javascript" src="<$MTBlogURL$>js/prototype/prototype.js"></script><script type="text/javascript" src="<$MTBlogURL$>js/prototype/accordion/effects.js"></script><script type="text/javascript" src="<$MTBlogURL$>js/prototype/accordion/accordion.js"></script><script type="text/javascript">Event.observe(window, 'load', loadAccordions, false);function loadAccordions() {var acobj = new accordion('#accordion_container');acobj.activate($$('#accordion_container .accordion_toggle')[0]);}</script>
青い字の部分を各自のサイトに合わせて変更します。
赤い字の部分は「オブジェクトの説明」で説明した各プロパティを省力した形になります。 各自の好みで変更したい場合には、先ほど説明したようにお好みで指定します。緑の字の部分で最初に表示したいパネルの番号になります。パネル番号は '0' からとなります。
- 2007.07.20 追記 -
こちらのカスタマイズで使用している effect.js はこちらの script.aculo.us の effect.js を使用してました。
ですので、既に scriptaculous.js をロード済みまたは、effects.js をロード済みの人は改めて effect.js をロードする必要ありません。oscar さんご連絡ありがとうございます ( ̄∇ ̄)/
最後に「アコーディオンの構造」で説明したタグ構成で記事を書いていけば完了です ( ̄∇ ̄)b
以上で prototype を使ってアコーディオンのように表示することができました。
サンプルも付いてますし、説明もありますので問題なく設置できると思いますよ♪
Trackback Pings(1)
- from
K´s Labo
皆さ〜ん、とても暑いですね〜。如何お過ごしですか〜?私はと言いますと、昨日(8...
Comments(4)
- #2: Posted by bzbell [RES]
>>1 oscar さん
こんばんわ^^
> スクリプトのうちeffects.jsは、scriptaculousの一部なんで、その事追記しといたほうが良いと思います。
あっ、ホントですね (゚∀゚; )
コード見ればすぐに分かることですね。そういえば先日、scriptaculous がバージョンアップされたのを教えてもらって、こちら(http://bizcaz.com/archives/2006/08/27-192539.php)の記事に追記した時に effect.js 使ったの忘れてました (; ̄∇ ̄A
ありがとうございます。
- #3: Posted by かわぐち [RES]
ども、お久しぶり、ぶり、のかわぐちです。
いつもながら、たいへん勉強になりますね~。私もMT4のリリースに合わせて、いろいろと計画してたんですが、
リリースが延期になっちゃって、ちょっとその勢いも
トーンダウン気味の毎日です。>目玉おやじ' がジャグジー(炭酸のジュース)に
ってことは、人間で言うと、
風呂の中に「バブ」を大量に入れたみたいなもんでしょうか?
すいません。戯言でした。
- #4: Posted by bzbell [RES]
>>3 かわぐち さん
こんばんわ^^
> リリースが延期になっちゃって、ちょっとその勢いも
> トーンダウン気味の毎日です。ですね。
わたしはプラグインの動作確認に疲れてしまって、今放置プレイです (; ̄∇ ̄A
メッチャ時間かかるんだもん(*ノД`*)> 風呂の中に「バブ」を大量に入れたみたいなもんでしょうか?
バブって使ったことないんですけど、アワアワ、ブクブクするんですか!?
だとしたらそんなかんじです (●´∀`●)


こんばんは、夏休み中の季節感なし男です。
アコーディオン・エフェクト良いなぁと眺めていたんですが、やっと使えます。って使うところあるのか?
私のところは、prototype+scriptaculousなので、あきらめてたんですよ。
それでbzbellさん、スクリプトのうちeffects.jsは、scriptaculousの一部なんで、その事追記しといたほうが良いと思います。scriptaculousをload指定無しで読み込んでる場合、effects.jsも自動的に読み込まれますし、大抵はeffects.jsのみのloadが多いようですから。