Как связать массив в mootools?

Question

Скажем у вас есть массив в MooTools:

// get the elements and set them as slide 
var slideElements = $$('.mySlideElements'); 
slideElements.set('slide'); 

// and fire the event -> would slide all elements out at the same time 
slideElements.slide('out'); 

Как я мог поместить это в цепь, чтобы скользить их по одному за раз?

До сих пор мне удалось добиться цепочки, если я знаю точное количество действий, которые я буду выполнять. Спасибо за вашу помощь.

Answer 1

Я закончил тем, что много работал над этим, цепочка была намного сложнее, чем я думал на первый взгляд. Я никогда раньше не использовал его так: D

Вы можете определенно пройти через массив slideElements. Сочетание событий элемента друг с другом - сложная часть. Я закончил с функцией замыкания петли, что петли через каждые slideElement и цепи предыдущий пункт в списке к текущей позиции:

<!-- Working example of chained sliding divs --> 
<div class="mySlideElements" style="background: red" id="slide1">Slide 1</div> 
<div class="mySlideElements" style="background: yellow">Slide 2</div> 
<div class="mySlideElements" style="background: green">Slide 3</div> 
<div class="mySlideElements" style="background: purple">Slide 4</div> 
<script type="text/javascript"> 
    var slideElements = $$('.mySlideElements'); 
    slideElements.set('slide'); 

    for(var i = 1; i < slideElements.length; i++) (function(c1,c2){ 
     c1.get('slide').chain(function(){c2.slide()}); 
    })(slideElements[i-1],slideElements[i]); 

</script> 

<input type="button" onclick="$('slide1').slide()" value="slide"/> 

Calling get('slide') возвращает объект Fx.Slide, который был установлен на каждом элементе, который вам затем может быть привязана к функции. Мой Mootools-fu не был достаточно сильным, чтобы понять, как связать его непосредственно с свойством slide следующего элемента (который должен быть быть функцией, но он не работал), поэтому я закончил с анонимную функцию, которую вы видите внутри вызова chain(), что почти так же хорошо. Закрытие цикла function(c1,c2) было необходимо, чтобы локальная переменная цикла i не выходила из области действия к моменту вызова вызываемой анонимной функции.

Он настроен как цепная реакция, когда срабатывает функция первого элемента slide. Если вам понадобилось все, чтобы каскадировать всякий раз, когда нажимается элемент, вы, вероятно, захотите установить событие onClick каждого элемента, чтобы запустить первого элемента, а не их собственный.

В любом случае, приведенный выше код является рабочим примером. Я надеюсь, что результаты - это то, что вы искали.

Answer 2

, на мой взгляд, это лучший/«способный» способ сделать это. экземпляр FX предоставляет две возможные вещи, которые можно использовать: link: «chain» и onComplete: function. так что-то вроде этого:

var slideEls = function(els) { 
    if (!els.length) 
     return; 

    var lastEl = els.getLast();  
    lastEl.set("slide", { 
     duration: "long", 
     link: "chain", 
     onComplete: function() { 
      els.erase(lastEl); 
      slideEls(els); 
     } 
    }).slide("out"); 
}; 

slideEls($$('div.mySlideElements')); 

рабочего пример здесь: http://mootools.net/shell/GmUpM/

это будет работать с бесконечной длиной массива элементов выскользнуть

Answer 3

Попробуйте это:

$$('.mySlideElements') 
    .set('slide', { 
     onComplete: function (el) 
     { 
      if (el = el.getParent().getNext ('.mySlideElements')) 
       el.slide ('out'); 
     } 
    }) 
    [0].slide ('out'); 

Это просто требует, чтобы .mySlideElements были непосредственными братьями и сестрами