¿hasta donde podre llegar?

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.

en mi pequeña vida como analisista y desarrollador de aplicaciones web, es necesario no solo aplicar funciones basicas a la aplicación, mas alla de aquella costumbre se puede agregar el valor en dinamismo.

mootools es un framework en base a javascript que ayudar al desarrollador implementar aplicaciones web dinámicas de muy alto nivel, simplemente agregando cortas lineas de código.

entre los principales ejemplos aplicados podemos encontrar ajax, manejo de divs, acordeones, movimiento de bloques, efectos de estilos, etc, etc.

es tan amplio su desarrollo que he desidido crear una categoría especialmente para mootools

conforme pase el tiempo añadire ejemplos y modos de empleo.

la página oficial de mootools la pueden encontrar aqui
los ejemplos y demos los pueden encontrar aqui