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: 17
Visitas el mes pasado: 15
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
La clase Fx.Reveal permite hacer aparecer o desaparecer un elemento de forma progresiva.
Al aparecer el elemento este lo puede hacer de arriba a abajo, de izquierda a derecha o ambas opciones a la vez. Además tenemos la opción de que al mismo tiempo que aparece tiene una transición de transparente a opaco.
Para que funcione esta clase debemos cargar los archivos "core" y more" de mootools.
Tal como hemos hecho con los objetos anteriores, el primer paso es instanciar el objeto, de la siguiente manera:
efecto=new Fx.Reveal($("elemento"),{[opciones]});
Dentro de las opciones podemos poner todas las opciones de la clase Fx.Morph y además las siguientes opciones específicas de este objeto.
Veamos un ejemplo en el que instanciamos un objeto:
efecto=new Fx.Reveal($("capa1"),{ duration: 1500, transition: "bounce:out", mode: "vertical" });
Los métodos son los que nos permiten realizar el efecto; ya que son los que ocultan o visualizan el objeto. Estos son:
dissolve() : Hace desaparecer el elemento:
efecto.disolve()
reveal() : Hace aparecer el elemento progresivamente:
efecto.reveal()
podemos ponerle opcionalmente un argumento con opciones del objeto (estas irán entre llaves).
toggle() : el elemento aparece o desaparece cambiando de estado. Opcionalmente también puede llevar como argumento las opciones de Fx.Reveal
efecto.toggle()
Vamos a probar el efecto haciendo un ejemplo en el que pondremos botones para utilizar los métodos vistos anteriormente. El primer paso es ver el código HTML:
<div id="caja1"> <div id="capa1"> <h2>El efecto Reveal</h2> <p>El efecto reveal permite hacer aparecer o desaparecer progresivamente un elemento.</p> </div> </div> <p><button id="boton1">Ocultar</button> ... <button id="boton2">Ver</button> ... <button id="boton3">Ver/Ocultar</button> </p>
Encerramos todo dentro de una caja (caja1) a la que le daremos unas medidas fijas. El elemento que aparece y desaparece es el id="capa1". Luego ponemos los botones para aplicar los métodos.
El siguiente paso es crear el código CSS asociado a los elementos anteriores. Esto permite darles tamaño y estilo:
#caja1 { width: 300px; height: 250px; border: 3px double red;float: right; margin: 1em 3em 1em 1em; } #capa1 { margin: 25px; background-color: #ff9; width: 250px; height: 200px; } #capa1 h2 { font: bold 18px helvetica; text-align: center; padding: 3px; color: navy } #capa1 p { font-size: 14px; text-align: left; margin: 0px; padding: 3px; }
El efecto reveal permite hacer aparecer o desaparecer progresivamente un elemento.
... ...
Mostramos aquí a la derecha el ejemplo ya en marcha, sin embargo todavía nos falta ver el código javascript-mootools que hace que funcione. En primer lugar instanciamos el objeto:
efecto=new Fx.Reveal($("capa1"),{ duration: 1500, transition: "bounce:out", mode: "vertical" });
Después aplicamos el evento "click" a los botones, y en cada uno de ellos aplicamos un método del objeto anterior:
$("boton1").addEvent("click",function(){ efecto.dissolve(); }); $("boton2").addEvent("click",function(){ efecto.reveal(); }); $("boton3").addEvent("click",function(){ efecto.toggle(); });
La clase Fx.Reveal tiene una serie de métodos que podemos aplicar directamente sobre un elemento. Estos son:
$("elemento").reveal()
Hace aparecer el elemento seleccionado (se supone que estaba previamente oculto). Como argumento se le pueden pasar las opciones de Fx.Reveal().
$("elemento").dissolve()
Oculta el elemento seleccionado. No se le pasan argumentos.
$("elemento").nix()
Borra o elimina totalmente el elemento especificado. Podemos pasar opcionalmente dos argumentos, uno son las opciones de Fx.Reveal, y el segundo un booleano true, que indica que la eliminación es total, o false, (por defecto) que indica que el elemento no se elimina del DOM y se puede recuperar.
$("elemento").wink()
Este método produce en el elemento varios efectos seguidos. En primer lugar el elemento aparece, después se mantiene visible un tiempo (por defecto 2000 ms), para despúes volver a ocultarse. Como argumento podemos pasar un número que indica los milisegundos que el elemento estará visible (2000 por defecto).
En la siguiente página vemos el efecto "scroll" que puede usarse como un método alternativo a las barras de desplazamiento.
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