En este post aprenderemos a hacer un efecto de Slide gracias a MooTools, aquí podeís ver el resultado de lo que vamos a realizar en este tutorial. Cabe mencionar que no le he dado ningún estilo con CSS pero con él, podríamos obtener un mejor resultado, como por ejemplo el que nos muestran en la demo de la página de Mootools.
Para el que no lo sepa, Mootools es una librería JavaScript que facilita la tarea al diseñador, pudiendo usar efectos y aplicaciones que sean funcionales para el usuario insertando unos simples scripts en nuestra web, ahorrándose así el tener que programar todos los efectos.
Empecemos
JavaScript
Primero que nada deberemos de llamar a la librería javascript, para ello antes de </header> lo siguiente:
src="mootools.js"></script>
El siguiente script que debemos añadir es el siguiente:
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('contenido-slide');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
En la 3ª linea donde pone 'contenido-slide' es el id del div que contendrá todo el contenido que aparecerá y desaparecerá.
El Html
El código Html lo deberemos de crear nosotro con el contenido que queramos por ejemplo:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc enim sapien, facilisis placerat, ornare eget, pretium eget, libero. Phasellus dui. Integer ut massa vel orci mollis ornare. Praesent tellus. Vestibulum ipsum eros, facilisis ac, consequat eget, bibendum vitae, quam. Fusce placerat elit sed purus. Curabitur auctor nonummy leo. Sed lectus felis, sollicitudin ac, placerat a, pretium a, quam. Aenean enim. Proin vestibulum mi nec metus. Sed mauris nisi, elementum nec, fringilla sed, adipiscing cursus, est.
</div>
<div>
<a id="toggle" href="#" name="toggle">toggle</a>
</div>
<div id="contenido-slide">
<h2>Yo aparezco, y desaparezcooo!!</h2>
Vestibulum in mauris. Aenean eget purus. Sed turpis mi, tempor non, tristique vitae, convallis vitae, velit. Praesent mattis nulla et tellus rutrum lacinia. Curabitur facilisis rutrum mauris. Sed ac nulla. Sed aliquet accumsan tortor. Aenean dictum lectus et leo. Phasellus tortor ligula, aliquam in, fringilla et, tempor sed, ligula. Aenean tincidunt, tortor eu vehicula tincidunt, ligula orci pretium massa, quis ultricies turpis quam eu diam.
</div>
En el código HTML solo hay que destacar dos cosas, la primera es el <div id="contenido-slide> que sera el div que aparecerá y desaparecerá, y la segunda y última <a id="toggle" href="#" name="toggle">toggle</a> que será el link que probocara el efecto. Tiene la "id" y el "name" com toggle por que en la 4ª linea del segundo JavaScript lo definimos así.
El CSS
Por último podríamos definir el estilo de los divs con CSS pero que no es totalmente necesario y como no esta directamente relacionado con el tutorial en si no lo vamos a incluir, por lo menos por ahora.
Código completo
Por último este sería el codigo de un archivo PHP con todo lo que hemos dicho antes y funcionando a la perfección con el efecto Slide de Mootols. Aqui teneis el ejemplo del archivo funcionando.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorial: Slide con Mootools [DEMO] - GuiaBreve</title>
<script type="text/javascript"
src="mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('contenido-slide');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
</head>
<body>
<div>
<h1><a href="http://www.GuiaBreve.com">www.GuiaBreve.com</a></h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc enim sapien, facilisis placerat, ornare eget, pretium eget, libero. Phasellus dui. Integer ut massa vel orci mollis ornare. Praesent tellus. Vestibulum ipsum eros, facilisis ac, consequat eget, bibendum vitae, quam. Fusce placerat elit sed purus. Curabitur auctor nonummy leo. Sed lectus felis, sollicitudin ac, placerat a, pretium a, quam. Aenean enim. Proin vestibulum mi nec metus. Sed mauris nisi, elementum nec, fringilla sed, adipiscing cursus, est.
</div>
<div>
<a id="toggle" href="#" name="toggle">toggle</a>
</div>
<div id="contenido-slide">
<h2>Yo aparezco, y desaparezcooo!!</h2>
Vestibulum in mauris. Aenean eget purus. Sed turpis mi, tempor non, tristique vitae, convallis vitae, velit. Praesent mattis nulla et tellus rutrum lacinia. Curabitur facilisis rutrum mauris. Sed ac nulla. Sed aliquet accumsan tortor. Aenean dictum lectus et leo. Phasellus tortor ligula, aliquam in, fringilla et, tempor sed, ligula. Aenean tincidunt, tortor eu vehicula tincidunt, ligula orci pretium massa, quis ultricies turpis quam eu diam.
</div>
</body>
</html>
Y si aún tenéis dudas
Si no os a quedado claro y tenéis alguna duda o problema podéis dejar un comentario he intentaré solucionar lo antes posible o si lo prefieren pueden contactarme vía correo electrónico en la sección de contacto.
Hola: Caí en tu blog buscando info sobre jQuery y me topé con el ejemplo del menú que muestra y oculta las opciones, muy bueno. Luego vi este de MooTools y probé el ejemplo online pero no funcionó, hice click en toggle y no hubo ningún cambio. Lo probé con FF3 Opera y con IE6.
Intentaré probarlo en mi pc.
Igual es muy buen blog
Saludos
@Nito : Tienes razón, lo acabo de probar y el ejemplo no funciona. Lo arreglaré en los próximos días. Gracias por el aviso y bienvenido al blog.
El ejemplo no funciona arreglalo please , no sale nada
El ejemplo falla por el enlace http://demos.mootools.net/demos/mootools.svn.js. Si nos bajamos la librería mootools y la enlazamos funciona bien.
Una pregunta, el contenido slide aparece visible y luego se oculta. ¿Cómo puedo hacer que al inicio salga oculto?
Gracias
El ejemplo ya funciona. Como decía Toni lo que estaba mal es el enlace a el archivo
mootools.js.Saludos.
Por cierto Toni, para que aparezca el contenido invisible tienes que editar la tercera linea del script dejandola así:
var mySlide = new Fx.Slide('contenido-slide').hide();Como ves, lo que he hecho es añadir
.hide()para indicar así que quiero que aparezca oculta.Gracias Víctor.
Estoy empezando a trabajar con mootools y estoy un poco perdido. Buscando por la red te encuentras muchas cosas pero me gustaría tener una base para poder desarrollar mis propios scripts. ¿qué me recomiendas? ¿Cuál crees que es la mejor forma de empezar?
gracias otra vez