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 (II Efectos)

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: 16

Visitas el mes pasado: 17

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.




MooTools2 (XIII)

La clase Fx.Sort

imagen mootools

Introducción

El efecto Fx.Sort() se aplica a un grupo de elementos (elementos de una lista, párrafos de un mismo elemento, elementos de una misma clase, etc).

Permite intercambiar entre sí el orden de los elementos. Hay por tanto un cambio de la posición de los elementos en la página que se realiza de forma progresiva, es decir, mediante transición.


Instanciar el objeto

Tal como ocurre con los efectos anteriores, lo primero que debemos hacer es instancar el objeto. Como argumentos pasaremos en primer lugar el array de elementos al que aplicamos el efecto, y después, como segundo argumento, las opciones.

efecto=new Fx.Sort($$(".misElementos"),{[opciones]});

Las opciones que podemos poner son las mismas que para la clase Fx.Elements, y además la siguiente opción:


Métodos

Los métodos son los que realmente permiten realizar el intercambio de posiciones entre los elementos, y por tanto el cambio de orden. Son los siguientes:

.backward()

Invierte el orden de los elementos tomando como referencia su posición original. El método no tiene argumentos.

efecto.backward();

.forward()

recupera el el orden de los elementos en su posición original. El método no tiene argumentos.

efecto.forward();

.reverse()

invierte el orden de referencia de los elementos tomando como referencia la posición actual. El método no tiene argumentos.

efecto.reverse();

.sort([orden])

Toma el orden que se le pasa en el argumento. El argumento es un array cuyos elementos son los números que indican el orden de los elementos.

efecto.sort([2,5,3,0,1,4]);

.sortByElements([elementos])

Toma el orden que se le pasa en el argumento. Sin embargo aquí en el argumento pasamos en un array los elementos en si mismos, es decir, los objetos "element" que corresponden a los elementos.

efecto.sortByElements([$("e2"),$("e0"),$("e3"),$("e1")]);

.swap(elemento,elemento)

Passmos como argumento dos elementos (su objeto "element"), los cuales intercambian sus posiciones en la página.

efecto.swap($("e1"),$("e3"));

.rearrangeDOM([orden])

Reordena los elementos en un nuevo orden, el cual es tomado como orden original, es decir, cambia el orden original del DOM a un nuevo orden que se le pasa como argumento en un array. En este método el paso se produce de forma instantánea, sin transición.

efecto.rearrangeDOM([2,5,3,0,1,4]);

.getCurrentOrder()

Crea un array cuyos elementos son los números de las posiciones actuales de los elementos del efecto.

miarray=efecto.getCurrentOrder();

Sólo el método rearrangeDOM reordena los elementos en el DOM. Los otros métodos cambian los elementos de sitio, sin embargo en el DOM permanecen en el mismo lugar.


Ejemplo del efecto Sort

Vamos a crear un ejemplo en el que tendremos varios elementos de distintos colores, a los cuales les aplicaremos los métodos vistos anteriormente. Para empezar creamos el código HTML, en el que tendremos dos partes, la primera los elementos a los que les aplicamos el efecto, (en un div id="colores", en la segunda los botones de control con los distintos métodos. Debajo de ellos, con el método getCurrentOrder mostraremos el orden de los elementos. Este es el código HTML:

<div id="caja1">
  <div id="colores">
    <h2>Colores</h2>
    <p id="c0" style="background-color: red">0.Rojo</p>
    <p id="c1" style="background-color: yellow">1.Amarillo</p>
    <p id="c2" style="background-color: orange">2.Naranja</p>
    <p id="c3" style="background-color: purple">3.Púrpura</p>
    <p id="c4" style="background-color: green">4.Verde</p>
    <p id="c5" style="background-color: blue">5.Azul</p>
  </div>

  <div id="controles">
    <h2>Métodos</h2>
    <p id="control1">backward</p>
    <p id="control2">forward</p>
    <p id="control3">reverse()</p>
    <p id="control4">sort([4,5,3,0,2,1])</p>
    <p id="control5">rearrangeDOM[1,2,3,4,5,0]</p>
    <p id="control6">sortByElements(3,5,0,2,4,1)</p>
    <p id="control7">swap (1,4)</p>
  </div>
  <h4 id="ver_orden">Orden: </h4>
</div>

Para mostrar esto de una forma adecuada necesitamos ponerle un código CSS a estos elementos, de manera que estén de una forma ordenada. Nosotros para mostrarlos aquí en esta página tal como veremos a continuación, les hemos aplicado el siguiente código CSS:

#caja1 { float: right; width: 40%; height: 250px; margin: 1em 3em 1em 1em; 
         border: 1px solid blue; }
#caja1 h2 { font: bold 17px verdana; color: navy; text-align: center; }
#caja1 h4 { clear: both; font: bold 14px verdana; text-align: left; margin: 10px 20px;  }
#caja1 p { font: normal 12px verdana; 
           text-indent: 0em; }
#colores { float: left; width: 40%; }
#colores p { color: grey; margin: 5px 15px; padding: 2px 10px;}
#controles { float: left; width: 60%; }
#controles p { background-color: silver; margin: 2px 10px; padding: 2px 5px;
               cursor: pointer; }

Colores

0.Rojo

1.Amarillo

2.Naranja

3.Púrpura

4.Verde

5.Azul

Métodos

backward

forward

reverse()

sort([4,5,3,0,2,1])

rearrangeDOM[1,2,3,4,5,0]

sortByElements(3,5,0,2,4,1)

swap (1,4)

Orden:

Vemos aquí a la derecha el ejemplo ya en funcionamiento. Sin embargo para que los efectos funcionen tal como vemos aquí, nos falta todavía insertar el código de javascript-mootools.

En él instanciaremos primero el objeto Fx.Sort, para luego en cada botón, mediante el evento click, aplicar los distintos métodos.

Pondremos también una función verOrden() en la que mediante el método getCurrentOrder escribiremos el orden de los elementos. En cada evento click habrá una llamada a esta función.

Recuerda que debemos tener cargados los archivos mootools-core.js y mootools-more.js, y además el código lo escribiremos dentro de la estructura "domready".

efecto1=new Fx.Sort($$("#colores p"),{
  duration: 1200,
  mode: "vertical",
  transition: "bounce:out"
  });
$("control1").addEvent("click",function(){
  efecto1.backward();
  verOrden();
  });
$("control2").addEvent("click",function(){
  efecto1.forward();
  verOrden();
  });
$("control3").addEvent("click",function(){
  efecto1.reverse();
  verOrden();
  });
$("control4").addEvent("click",function(){
  efecto1.sort([4,5,3,0,2,1]);
  verOrden();
  });
$("control5").addEvent("click",function(){
  efecto1.rearrangeDOM([1,2,3,4,5,0]);
  verOrden();
  });
$("control6").addEvent("click",function(){
  efecto1.sortByElements([$("c3"),$("c5"),$("c0"),$("c2"),$("c4"),$("c1")]);
  verOrden();
  });
$("control7").addEvent("click",function(){
  efecto1.swap($("c1"),$("c4"));
  verOrden();
  });
function verOrden(){
    miOrden=efecto1.getCurrentOrder();
    miOrden= miOrden.join(",")
    texto="Orden : "+miOrden;
    $("ver_orden").set("html",texto);
    }

Aquí hemos hecho un ejemplo con los elementos en posición vertical. Podemos hacer también el efecto con elementos que estén en horizontal, es decir en una misma línea. Basta con colocarlos mediante CSS en una línea horizontal, y después indicarlo en las opciones mediante la opción mode="horizontal".





Aquí acaba esta segunda parte del manual de mootools. Sin embargo en mootools tenemos también más opciones. En la tercera parte veremos otros efectos y otras cosas que pueden hacerse con mootools.

MooTools avanzado: efecto de arrastrar-soltar



Manual de Mootools (II Efectos)

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