スポンサーサイト

--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

◆ アコーディオン効果 JSでゆっくり開閉

2012年06月12日 12:49

引き続きDTMではない訳だが、WEBの知識は何かとDAWに良い影響をもたらすということでHTMLお勉強。
よくある「クリックするとBOXがゆっくり開く・閉じる(アコーディオン効果)」ってやつをやってみた。

検索したらjQueryとかじゃなくて、極小の独立JSファイルで実装するサンプルがあったので、そちらを流用。
ここで意味もなくポールさんに登場してもらいましょう。



■オリジナルDEMO(複数親BOXと複数子BOXが可能で秀逸!)
http://sandbox.scriptiny.com/javascript-accordion/index.html

■オリジナル概要説明(英語)
http://www.scriptiny.com/2009/03/accordion/

■サンプルソース一式DL
http://forum.leigeber.com/index.php?app=downloads&showfile=5

■カスタマイズ豆知識
アコーディオン効果のスピードを任意設定するには、 script.js の29行目
"function su(c){c.t=setInterval(function(){sl(c)},20)};"の「20」って数値を変更すればOK。
数値を上げると開閉スピードが下がります。

またオリジナルDEMOのように複数の親・子BOXを使う場合、HTMLソース下部のJavaScript記述の下記を調整すると色々お得な感じになる!
"parentAccordion.init("acc","h3",X,0);"
X部分を1にすると:親BOXがどれか一つだけが開いて、他BOXを開くとも元BOXが閉じる
X部分を0にすると:親BOXの開閉がそれぞれで影響し合わない

"parentAccordion.init("acc","h3",1,Z);"
Z部分を-1にすると:デフォルトで親BOXが全閉じ
Z部分を0にすると:デフォルトで1番目親BOXが開く
Z部分を1にすると:デフォルトで2番目親BOXが開く
Z部分を2にすると:デフォルトで3番目親BOXが開く

ちなみに"nestedAccordion.init("nested","h3",1,-1,"acc-selected");"の方は子BOX用だけど、数値設定の要領は親BOXと同じです。


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://jskc4daw.blog52.fc2.com/tb.php/222-15d017ad
    この記事へのトラックバック

    まとめtyaiました【◆ アコーディオン効果 JSでゆっくり開閉】

    引き続きDTMではない訳だが、WEBの知識は何かとDAWに良い影響をもたらすということでHTMLお勉強。よくある「クリックするとBOXがゆっくり開く・閉じる(アコーディオン効果)」ってやつ



    最新の記事


    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。