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: 21
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:
Si este sitio te parece interesante puedes contribuir con una pequeña aportació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.
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 :
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;
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.
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.
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