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

Visitas el mes pasado: 38

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

La clase Fx.Reveal

imagen mootools

Introducción

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.


Instanciar el objeto

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"
   });


Métodos del objeto

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


Ejemplo de efecto Fx.Reveal

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

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();
});


Aplicar sobre "Element"

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.

La clase Fx.Scroll()



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