Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (III Avanzado)

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 36

Visitas el mes pasado: 92

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net
docs/more/ página oficial mootools
mootools.net

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




MooTools3 (V)

Reordenar listas

imagen mootools

La clase Sortables()

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.


Instanciar un objeto

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í.

Tipos de letras

Helvetica

Courier new

Times new roman

Comic Sans MS

Monotype Corsiva

Reordena los tipos de letra arrastrandolos a otras posiciones.

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.


Opciones

Estas son las opciones que podemos poner en el segundo argumento al instanciar el objeto:


Eventos

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():


Métodos

La mayoría de los métodos están relacionados con la activación o desactivación del efecto de arrastre:

Ejemplo de la clase Sortables()

Colores

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.

Construir tablas



Manual de Mootools (III Avanzado)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com