Spryのアコーディオンウィジェットをマウスオーバーで開く

最も基本的なサンプルにほんの少し手を加えるだけでアコーディオンをマウスオーバーで開閉できるようになります。
変更手順:

  1. クラスAccordionPanelがついているdivタグにidをつける
  2. SpryDOMUtils.jsにリンクさせる
  3. Spry.$$(“.AccordionPanel”).addEventListener(“mouseover”, function(){sampleAccordion.openPanel(this.id); return false;});の1文を加える

以上で、クリックでしか開閉できなかったものをマウスオーバーで開くようになります。
実動サンプル

ソース:
[html]

Spry Accordion

Panel 1
Content for Panel 1 goes here!

Panel 2
Content for Panel 2 goes here!

Panel 3
Content for Panel 3 goes here!

Panel 4
Content for Panel 4 goes here!

var sampleAccordion = new Spry.Widget.Accordion(“sampleAccordion”);
//セレクタファンクションaddEventListenerでマウスオーバーしたらid名のパネルを開く命令
Spry.$$(“.AccordionPanel”).addEventListener(“mouseover”, function(){sampleAccordion.openPanel(this.id); return false;});

[/html]

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中