Fx.Slideを1ページ内にいくつも並べるサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <h2><a class="toggle" href="#">toggle</a></h2><div class="test">sample</div><h2><a class="toggle" href="#">toggle</a></h2><div class="test">sample</div><h2><a class="toggle" href="#">toggle</a></h2><div class="test">sample</div><h2><a class="toggle" href="#">toggle</a ></h2><div class="test">sample</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | window.addEvent('domready', function(){var btns = $$('.toggle');var divs = $$('.test');btns.each(function(el,index){ var mySlide = new Fx.Slide(divs[index], {mode: 'horizontal'}); btns[index].addEvent('click', function(e){ e = new Event(e); mySlide.toggle(); e.stop(); });});}); |
var btns = $$('.toggle');
ボタンになる要素取得。
var divs = $$('.test');
スライドする要素取得。
btns.each(function(el,index){
foreach($btns as $index =>$el) という意味
var mySlide = new Fx.Slide(divs[index], {mode: 'horizontal'});
divsの要素それぞれにFx.Slide作成。
btns[index].addEvent('click', function(e){
クリックイベント作成。
配列で取得した順にeachで処理するので、btns[2]をクリックしたらdivs[3]をスライドさせるということは出来ない。