¿hasta donde podre llegar?

hector2c, mi bitacora

fx.slide – toogle

with one comment

fx.slide esta desarrollado para mootools, esta clase nos permite dar efectos para poder ocultar divs con movimientos, horizontales, verticales.

mas información la encuentras en fx.slide desde mootools en el siguiente enlace.

pues, el ejemplo que les tengo agregado, les sirve para tener que evitar generar bloques de código javascript para cada div que deseen dar este efecto.

el efecto que estoy aplicando es toggle, es un efecto de ocultación y muestreo con movimiento.

requisitos: framework mootools, lo puedes descargar desde la misma pagina de mootools en el siguiente enlace.

primeramente incluimos el .js de mootools:

<script type="text/javascript" charset="utf-8" src="extras/js/mootools/mootools.svn.js"></script>

seguidamente agregamos la función para instanciar la clase fx.slide y dar el valor toggle

<script>
var Collapsables = {
init:function(){
var list = $$("a.encendedor");
list.each(function(e){
target = e.href.split("#")[1];
e.fx = new Fx.Slide(target);
e.addEvent('click', function(el){
ev = new Event(el);
this.fx.toggle();
ev.stop();
});
e.fx.hide();
});
}
}
window.addEvent('domready', Collapsables.init);
</script>

finalmente agregamos html, para dar a ejecutar nuestro ejemplo:

<a href="#noticia" class="encendedor">noticia</a>
<div id="noticia">
<p>las ultimas noticias disponibles</p>
<p>contenido</p>
<p>contenido</p>

</div>
<a href="#importante" class="encendedor">importante</a>
<div id="importante">
<p>es importante, recordar lo dificil al caminar.</p>
<p>contenido</p>
<p>contenido</p>
</div>

como ven, en las etiquetas que seran los encendedores del toggle se les da como atributo class=’encendedor’, y se les enlace el nombre del div a mostrar y ocultar con href=’#nombre_del_div’

simplemente eso. como ven no es nada dificil, ahi ustedes con su imaginación, aplicaria css, para dar mas atractivo visual, pero el código es limpio, para su mejor compresión, css sera otro tema.

Anuncios

Written by hector2c

agosto 31, 2008 a 5:25 am

Publicado en javascript, mootools

Tagged with , , ,

Una respuesta

Subscribe to comments with RSS.

  1. Muuuuchaaaaas gracias por este pequeño pero potente script. Me ha sacado de un apuro!!!

    Javier

    junio 1, 2009 at 9:58 am


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: