Как связать массив в 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"/>

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

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

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

Answer 2

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

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

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

Answer 3

, на мой взгляд, это лучший / "мутучий" способ сделать это. экземпляр 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/

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