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

Visitas el mes pasado: 20

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

La clase Fx.Slide

imagen mootools

Introducción

El efecto Fx.Slide() hace que un elemento aparezca o desaparezca mediante un efecto de deslizamiento. El elemento aparece o desaparece con un deslizamiento progresivo sobre sí mismo, puede ser en vertical o en horizontal. El efecto es como si hubiera una puerta por la que el elemento puede entrar o salir de la escena.


Instanciar el objeto

Tal como hemos visto con las clases anteriores, lo primero que debemos hacer para utilizar esta clase es instanciar un objeto. Como primer argumento pondremos el elemento al que queremos aplicarle el efecto, y como segundo una serie de opciones, pertenecientes a la clase Fx, a las que pueden añadirse otras opciones propias de esta clase.

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

Como opciones podemos poner las opciones generales de la clase Fx (las de Fx.Morph), y además las siguientes opciones específicas de Fx.Slide :


Métodos y propiedades

Para trabajar con este efecto es fundamental aplicar sus diferentes métodos, los cuales son los que hacen que el elemento se oculte o se visualice.

.slideIn()

muestra el elemento que está oculto de una forma progresiva (con efecto). Opcionalmente se le puede pasar como argumento el modo en que se abrira , con las cadenas "horizontal" o "vertical" .

efecto1.slideIn("horizontal");

.slideOut()

Oculta el elemento que está visible de forma progresiva (con efecto). Al igual que el anterior se le puede pasar opcionalmente el modo como argumento.

efecto1.slideOut();

.toggle()

Combina los dos anteriores, si el elemento está visible lo oculta, y si esta oculto lo visualiza, haciendolo de forma progresiva (con efecto). Como en los anteriores podemos pasar opcionalmente el modo como argumento.

efecto1.toggle();

.show()

Muestra el elemento de manera instantánea (sin realizar el efecto).

efecto1.show();

.hide()

Oculta el elemento de manera instantánea (sin realizar el efecto).

efecto1.hide();

Además tenemos también la propiedad .open, que indica con un valor boleano si el elemento está visible (true) o si está oculto (false).

estado=efecto1.open;


Ejemplo del efecto Fx.Slide

Con lo visto hasta ahora nos será fácil hacer un ejemplo en donde veamos el efecto Fx.Slide. Empezamos por el código HTML:

<div id="caja1">
  <div  id="botones">
    <button id="boton1">slideIn</button> .
    <button id="boton2">slideOut</button> .
    <button id="boton3">toggle</button> .
    <button id="boton4">show</button> .
    <button id="boton5">hide</button>
  </div>
  <div id="texto1">
    <p>párrafo primero de un texto de prueba para comprobar el efecto "Fx.Slide".</p>
    <p>párrafo segundo también de prueba para hacer relleno y 
       que se alargue más el elemento.</p>
  </div>
</div>

Dentro de un elemento contenedor hemos puesto un primer elemento con los botones de control, y un segundo elemento que será el que tiene el efecto.

Añadimos ahora el código CSS para estos elementos, que en nuestro caso es el siguiente:

#caja1 { width: 40%; height: 170px; border: 1px solid black; float: right; 
       font: normal 13px verdana; margin: 1em 3em 1em 1em; }
#caja1 #botones {  color: yellow; background-color: blue; 
       text-align: center; font: normal 11px verdana;
       padding: 3px; margin: 5px; }
#caja1 #texto1 { color: blue; background-color: yellow; margin: 5px; }
#caja1 #texto1 p {  font: normal 14px verdana;padding: 5px; }

. . . .

párrafo primero de un texto de prueba para comprobar el efecto "Fx.Slide".

párrafo segundo también de prueba para hacer relleno y que se alargue más el elemento.

Vemos aquí a la derecha el ejemplo en funcionamiento, sin embargo para que esto funcione como aquí, tenemos que añadir también el código de javascript-mootools (el código debemos ponerlo dentro de la estructura "domready").

Tampoco debemos olvidar que tenemos que haber cargado los archivos mootools-core y mootools-more.

En este código primero instanciamos el objeto, para después aplicar los diferentes métodos a los botones de control.

efecto=new Fx.Slide($("texto1"),{
  duration: 1200,
  transition: "bounce:out",
  mode: "vertical"
  });
$("boton1").addEvent("click",function(){
  efecto.slideIn();
  })
$("boton2").addEvent("click",function(){
  efecto.slideOut();
  })
$("boton3").addEvent("click",function(){
  efecto.toggle();
  })
$("boton4").addEvent("click",function(){
  efecto.show();
  })
$("boton5").addEvent("click",function(){
  efecto.hide();
  })

Con esto tenemos ya el efecto en funcionamiento.


Aplicar sobre elementos

Tenemos también una forma abreviada de aplicar este efecto, y es directamente sobre los elementos, sin necesidad de instanciar el objeto. Sin embargo aquí no podemos controlar las diversas opciones, sino que se aplican siempre las opciones por defecto.

por ejemplo tenemos un elemento $("texto2"). Le aplicamos entonces el método .slide

$("texto2").slide("toggle")

En realidad la forma más normal de aplicarlo es sobre un botón, de la siguiente forma:

$("boton").addEvent("click",function(){
$("texto2").slide("toggle");
})

Como argumento podemos pasar los diferentes métodos, que se escriben así. "in" (para slideIn), "out" (para slideOut), toggle, show y hide.





En la siguiente página vemos el efecto "SmothScroll" que trata de los enlaces internos de una página.

La clase Fx.SmothScroll()



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