MooTools: la librería más completa para trabajar fácilmente con javascript.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 10
Visitas el mes pasado: 21
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquà mismo se enseñan.
By Anyelguti
Mediante la clase Sortables de mootools el usuario puede cambiar el orden de los elementos de una lista simplemente arrastrándolos a otra posición. Al arrastrar un elemento éste lo cambiamos de sitio en la lista. Los demás elementos de la lista subirán o bajarán una posición para dejar hueco al elemento que hemos cambiado.
Por lista entendemos no sólo las listas de HTML con etiquetas ul, ol, sino cualquier elemento que contenga otra serie de elementos, por ejemplo un div con varios párrafos en su interior.
Para tener una lista reordenable, lo primero que debemos hacer es instanciar un objeto de la clase Sortables :
lista1=new Sortables(lista,{[opciones]});
Como primer argumento podemos pasar el elemento que contiene la lista o un array con varios elementos que contienen cada uno una lista.
lista1=new Sortables($("lista1"));
lista2=new Sortables([$("lista2"),$("lista3")]);
El elemento o elementos que ponemos como primer argumento son los que contienen la lista o listas, y no los elementos de la lista en sí.
Helvetica
Courier new
Times new roman
Comic Sans MS
Monotype Corsiva
El segundo argumento es opcional, y consiste en una serie de opciones que veremos a continuación. Aunque no es obligatorio ponerlo, es conveniente hacerlo cuando queremos realizar algun efecto o acción relacionado con las opciones. Además también hay una serie de eventos que podemos ponerlos como opciones en el segundo argumento.
Vemos aquí a la derecha un ejemplo de una lista que podemos reordenar. más adelante veremos otro ejemplo con más detalle en el que explicaremos su código.
Estas son las opciones que podemos poner en el segundo argumento al instanciar el objeto:
Al igual que en otras clases de mootools, los eventos específicos de esta clase, pueden indicarse al instanciar el objeto con el prefijo on y el nombre en mayúsculas: onStart: function(){}; o sobre un objeto ya instanciado: lista1.addEvent("start", function(){});. Veamos cuáles son los eventos específicos de Sortables():
onStart: function(elemento,clon){ /*código de la funcion*/ });
onSort: function(elemento,clon){ /*código de la funcion*/ });
onComplete: function(elemento){ /*código de la funcion*/ });
La mayoría de los métodos están relacionados con la activación o desactivación del efecto de arrastre:
milista.detach()
milista.attach()
milista.removeItems($("el1"),$("el2"),$("el3"));
Aquí sólo los elementos de la lista con los "id" indicados se quedarán bloqueados.milista.addItems($("el1"),$("el2"),$("el3"));
milista.addLists($("lista2"),$("lista3"))
milista.removeLists($("lista2"),$("lista3"))
orden=milista.serialize(0);
la variable orden="el1,el4,el2,el3". por ejemplo, despues de mover el elemento 4 a 2ª posición.Rojo
Amarillo
Azul
Verde
Naranja
Marrón
Vemos aquí a la derecha otro ejemplo de lista a la que le hemos aplicado la clase Sortables. Hemos aplicado también algunas opciones y eventos de esta clase, de manera que el ejemplo sea un poco más completo.
Empezamos por el código HTML. Aunque los elementos móviles son sólo una parte, mostramos aquí el código de la caja completa de la derecha:
<div id="caja1"> <h2>Colores</h2> <div id="colores"> <p style="background-color: red">Rojo</p> <p style="background-color: yellow">Amarillo</p> <p style="background-color: blue">Azul</p> <p style="background-color: green">Verde</p> <p style="background-color: orange">Naranja</p> <p style="background-color: maroon">Marrón</p> </div> </div>
Dentro del id="caja1", lo que realmente nos interesa es el id="colores", donde están los elementos de la lista reordenable.
Pero antes debemos dar forma y tamaño a los elementos del HTML mediante el código CSS:
#caja1 { width: 35%; margin: 1em 3em 1em 1em; border: 1px solid black; float: right; height: 320px; } #caja1 h2 { font: bold 18px verdana; color: navy; text-align: center; } #caja1 p { font-size: 16px; padding: 10px; margin: 5px; }
Y ahora lo que convierte realmente esta lista en una lista reordenable es el código mootools-javascript, en el cual aplicamos la clase Sortables a la lista, incluyendo varias opciones y métodos:
miscolores=new Sortables($("colores"),{ clone: true, opacity: 0.5, dragOptions:{ container: $("colores") }, onStart: function(el,clon){ el.setStyle("border","5px double black"); clon.setStyle("opacity",0.5); }, onSort: function(el,clon){ el.setStyle("border","5px double olive"); clon.setStyle("border","5px double olive"); }, onComplete: function(el){ el.setStyle("border","0"); } });
Comentamos brevemente el código: en primer lugar instanciamos el objeto. Como primer argumento pasamos el elemento que contiene la lista, y como segundo una serie de opciones que incluyen también eventos.
La opción clone: true permite que al arrastrar el elemento podamos ver también una copia del mismo. La opción opacity: 0.5 hace que el elemento (no la copia), se vea semitransparente mientras se está arrastrando.
Aplicamos también una serie de eventos. Con el evento onStart, al empezar a arrastrar ponemos un doble borde negro al elemento, y además hacemos la copia semitransparente. Con el evento OnSort al cambiarse por otro elemento, cambiamos el color del borde a "olive", y además también le ponemos el mismo borde a la copia. El evento onComplete Se produce al soltar el elemento. La copia desaparece al soltar el elemento, y lo que hacemos es restabecer el elemento a su estado original.
En la siguiente página veremos la construcción de tablas con mootools mediante una clase específica para ello.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com