Cómo encadenar una matriz en mootools?

Question

Supongamos que tiene una matriz en 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');

¿Cómo podía poner esto en una cadena de deslizar uno a la vez?

Hasta ahora he sólo consiguió encadenar si sé el número exacto de acciones que va a realizar. Gracias por su ayuda.

Answer 1

Me acabó poniendo mucho trabajo en éste, el encadenamiento era mucho más complicado de lo que pensaba a primera vista. Nunca he utilizado en mucho antes de esta manera: D

Puede definitivamente recorrer la matriz slideElements. Encadenamiento de los acontecimientos de los elementos entre sí es la parte difícil. Terminé con una función de cierre de bucle que recorre cada slideElement y cadenas al elemento anterior de la lista para el elemento actual:

<!-- 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"/>

Llamando get('slide') devuelve el objeto Fx.Slide que se estableció en cada elemento, que luego se puede cadena a una función. Mi Mootools-fu no era lo suficientemente fuerte para averiguar cómo encadenar directamente a la propiedad slide del elemento siguiente (que debe es una función, pero no parece funcionar), por lo terminé con la función anónima que se ve dentro de la llamada chain(), que es casi tan bueno. El bucle de cierre function(c1,c2) era necesaria para evitar la variable de bucle local de i quede fuera de su alcance por el momento la función anónima encadenado fue llamado.

Está configurado como una reacción en cadena para cuando la función slide del primer elemento se desencadena. Si se necesitaba todo el asunto en cascada siempre cualquier se hace clic en el elemento, lo que probablemente desea establecer onClick caso de todos los elementos para disparar slide() del primer elemento y no el propio.

En cualquier caso, el código anterior es un ejemplo de trabajo. Espero que los resultados son lo que estabas buscando.

Answer 2

En mi opinión, esta es una manera mejor / "mootoolsy" de hacerlo. la instancia FX proporciona dos cosas posibles que se pueden utilizar: link: "cadena" y onComplete: función. así que algo como esto:

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'));

ejemplo de trabajo aquí: http://mootools.net/shell/GmUpM/

esto funcionará con una longitud de la matriz infinita de elementos para deslizar hacia fuera

Answer 3

Prueba esto:

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

Sólo requiere que sea .mySlideElements hermanos inmediatos