Movable Type 備忘録

JavaScript フレームワークに依存しないアコーディオンエフェクト（Animated JavaScript Accordion）

Oct262008
Author: bzbell
Categories: Tools
Tags: Accordion, JavaScript

Prev Page: [2008.10.18] Firefox 3 拡張機能
Next Page: Color Fading Menu with jQuery

こんばんわ^^

久しぶりに JavaScript のコードを解析して、実装してはテストを繰り返したのですが、改めて感じたことは Firefox ってホント遅いのねってことです。
Firefox3 になってもやっぱり Safari や Chrome と比べると格段に遅かったです。

でも、将来の Firefox のアルファバージョンと言われる、Minefield( マインフィールドであってる!? )というブラウザを少し使わせてもらったのですが、こちらは JavaScript の処理能力が格段によくなってました。
比較はしてないけど Safari、Chrome と同等くらい早かったです。スムーズに表示されます。

Minefield Pre-Release Version Download

共存はできるそうですが、既にインストール済みの Firefox アドオンがそのまま Minefield でも一部使用されてしまいます。
まだベータにもなってないアルファ版なので、インストールする人は気をつけてくださいね。

さて、prototype や jQuery などといった JavaScript フレームワークに依存せずアコーディオンのようなエフェクトを使ってサイドバーの折りたたみをやってみました。

Animated JavaScript Accordion V2

サンプル

以下はわたしのサイト向けにちょっとアレンジしたバージョンになります。

Animated JavaScript Accordion for bzbell

使い方

サンプルも添付されてますので、使い方は特に問題ないかと思われまするぅ (●´∀｀●)
以下のようなマークアップになっていればほぼ問題なく表示できるかと。

マークアップ

<dl class="accordion" id="slider">
<dt>サイドバータイトル 1</dt>
<dd>サイドバーコンテンツ 1</dd>
<dt>サイドバータイトル 2</dt>
<dd>サイドバーコンテンツ 2</dd>
</dl>

基本形は上記のようなかんじで、必ず dt と dd タグがペアになってる必要があります。
そして、ページ下の方で以下のようなコードを追加します。

JavaScript インスタンス作成

<script type="text/javascript">
var obj_slider=new accordion.slider("obj_slider");
obj_slider.init("slider", 1, open);
</script>

青字の部分は先ほどのマークアップで記した、dl タグの ID 名を指定します。
指定した dl タグにぶら下がる dt、dd タグを検索して、それらがアコーディオンのようにスライドされるようになります。
赤字の部分は accordion を生成時のオブジェクト名称を指定します。
カンタンに言うと、上記のように同名にすれば問題ありません（；￣－￣）

また、緑字とピンク字の部分はオプションです。
緑字の部分には初期表示時に表示( オープン )させたい dd タグの番号を指定します。具体的には dl タグにぶら下がる dd タグの順番になります。番号は 0 番から始まります。

ピンク字には、オープン時に付加されるクラス名称になります。
上記例だと、アコーディオン表示( オープン )された dt タグに 'open' というクラスが付加されますので CSS で表示制御可能になります。

そそ、もちろん HTML ヘッダ内に以下を追加することも忘れずに (￣∇￣)b

HTML ヘッダ内に追加

<script type="text/javascript" src="http://●●●.com/accordion/script.js"></script>

スライドのスピードは script.js 内の 2 行目にある以下の数値を小さくしていけばすばやい表示になります。

script.js / 2 行目

var tm=10; var sp=10;

注意すること

実際に使ってみていくつか注意点があります。

指定 dl タグにぶら下がる dt タグにクラス名を指定していた場合、動作中にそのクラスがクリアされてしまいます。
なので、script.js 内の以下の行に予め各自で必要なクラス名を追記しておくといいと思います。
script.js / 4 行目
1. this.nm=n; this.arr=[]; this.sel='ここに既にある dt タグのクラス名を追記'
上記青字の部分に追記します。
もう 2 つ以下のように変更します。
script.js / 12 行目
1. /*if(k!=null&&c==i){this.sel=d.className=k}*/
2. if(k!=null&&c==i){this.sel=d.className+=' '+k;}
赤字のようにコメントにして、青字の 1 行を追加します。
そして 4 行目と同じように以下の行に追記します。
script.js / 28 行目
1. else if(s.style.display==''){setup(s,-1); h.className='4 行目と同じクラス名を追記';}
dl タグがネスト( 入れ子 )したケースの場合には正しく動作しません。
先ほど少し触れたように、指定 dl タグにぶら下がる dt、dd タグが検索されますので、dt 内に dl があったり、dd 内に dl があるとそれらも検索されてしまい期待する表示になりませんのでご注意ください。
dd タグ内に padding を指定してはいけません。
もし隙間を入れる必要がある場合には、以下のように dd タグ内に div を包含するようにして、div タグに対して padding するようにします。
1. <dd>
2. <div>サイドバーコンテンツ</div>
3. </dd>
dd タグに対して padding による隙間を入れてしまうと正しく表示できないことがあります。ご注意ください。