札幌でWEBサイトを作る日々のメモ

Spryアコーディオンはデフォルトでがクリックで開閉するのが、マウスオーバーで開閉したい場合についてメモ。

Spryを使う必要があるのかは置いといて・・・。

DreamweaverCS4には「コマンド」→「JavaScriptを外部化」と言うメニューがあり、ビヘイビアのコードなんかを外部ファイル化してくれます。

DOMを扱えばコードもすっきりするので、「SpryDOMUtils.js」が書き出されてリンクされ「Spry.$$("body")」などが使えるようになる。

ネットで調べると、この「SpryDOMUtils.js」を使ってアコーディオンの挙動を変えられるようだ。
DOMが扱いやすいだけか？

CS3だと、フレームワークをダウンロードして使うのか？

http://livedocs.adobe.com/en_US/Spry/SDG/index.html

<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">ラベル 1</div>
<div class="AccordionPanelContent">コンテンツ 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">ラベル 2</div>
<div class="AccordionPanelContent">コンテンツ 2</div>
</div>
</div>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">ラベル 1</div>
<div class="AccordionPanelContent">コンテンツ 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">ラベル 2</div>
<div class="AccordionPanelContent">コンテンツ 2</div>
</div>
</div>

複数のアコーディオンを挿入した場合は、こんな感じでどうだろう。

Spry.Utils.addLoadListener(function() {

var num = 0;

Spry.$$(".AccordionPanel").forEach(function(n) { n.id = "panel" + num; num++; });

var Accordion1 = new Spry.Widget.Accordion("Accordion1");
Spry.$$("#Accordion1 .AccordionPanel").addEventListener("mouseover", function(){ Accordion1.openPanel(this.id); return false; });

var Accordion2 = new Spry.Widget.Accordion("Accordion2");
Spry.$$("#Accordion2 .AccordionPanel").addEventListener("mouseover", function(){ Accordion2.openPanel(this.id); return false; });

});