Neozeratul en la Red

Efectos reutilizables y accesibles con la librería Javascript MooTools.

Uno de los usos más frecuentes de las numerosas librerías Javascript es simplemente mostrar o esconder elementos de la página con efectos de movimiento. Con el combo Prototype + Scriptaculous, me he mal-acostumbrado a lo siguiente:

Code (html)

1. <a href=”#” id=”un_link” onclick=”new Effect.SlideDown(’panel’)”>Mostrar Panel!</a>

2. <div id=”panel” style=”display:none”>

3. Este contenido está escondido por defecto…

4. </div>

El ejemplo es sencillo; escondes un elemento con display:none y usas Effect.SlideDown (o cualquier otro efecto de Scriptaculous) en el evento onclick de un link.

Pero dije “mal-acostumbrado” porque la práctica es mala: no sólo estás poniendo lógica javascript en tu HTML, sino que, si el usuario deshabilitó Javascript en su browser, no será posible ver el contenido escondido. Además, ese vínculo sin href es inaccesible.

MooTools es una librería brillante. Su código es elegante y reducido, y tiene un framework de efectos muy bien pensado que permite crear tus propios efectos avanzados, con facilidad. Pero, “out of the box”, los módulos de efectos son de más bajo nivel que Scriptaculous y por lo tanto no es tan sencillo usarlos. Es necesario diseñar efectos que en Scriptaculous estan predefinidos, como Element.hide(), Element.show(), Effect.Highlight(), etc.

Además, la forma de iniciar y activar un efecto es distinta. MooTools parece estar pensado para aplicar comportamientos declarativamente, de preferencia en documentos .js externos (como es recomendable).

El caso anterior, ahora en MooTools:

Code (javascript)

1. var fx = new Fx.Slide(“panel”);

2. $(“un_link”).addEvent(‘click’, function(el){

3. ev = new Event(el);

4. fx.toggle();

5. ev.stop();

6. });

7. fx.hide();

Claramente más complicado. Creas el efecto, asignas un evento onclick al link donde activas o desactivas el efecto con toggle(), y evitas la propagación del evento con Event.stop(). Si quisieras reutilizar el mismo efecto para varios elementos en varias páginas, tendrías que repetir este código varias veces. Poco práctico.

Una forma más inteligente es definir este comportamiento una sola vez y asignarselo a cualquier elemento que cumpla con ciertas condiciones. En este ejemplo, el comportamiento se aplicará a todos los links que tengan la clase CSS “collapse_target”. Primero, el HTML.

Code (html)

1. <a href=”#panel” class=”collapse_target”>Mostrar Panel!</a>

2. <div id=”panel”>

3. Este contenido está escondido por defecto…</div>

Primera diferencia: el link ya no tiene el evento onclick declarado inline. Ahora, el atributo href contiene un ancla (”anchor”) a la id del objetivo (”panel”). Sin Javascript, esto cumple con la función de dirigir al panel si se presiona el link (más accesible).

Ahora, el Javascript, apropiadamente encerrado en un namespace “Collapsables”, para evitar conflictos de nombre con otras secciones de tu código.

Code (javascript)

1. /*

2. Elementos collapsables

3. ——————————*/

4. var Collapsables = {

5. init:function(){

6. var list = $$(“a.collapse_target”); // todos los links con esta clase CSS

7. list.each(function(e){

8. target = e.href.split(“#”)[1]; // id del target

9. e.fx = new Fx.Slide(target);

10. e.addEvent(‘click’, function(el){ // agrega onclick a los links

11. ev = new Event(el);

12. this.fx.toggle(); // gatilla efecto

13. ev.stop();

14. });

15. e.fx.hide(); //esconde target por defecto

16. });

17. }

18. }

19. /* Asignamos Collapsables.init() a onload del documento */

20. window.addEvent(‘domready’, Collapsables.init);

Voilà. Ahora, cualquier link con la clase adecuada aplicará el comprtamiento (mostrar / esconder con movimiento) a su objetivo. Pueden existir varios links con esta clase. Por supuesto, esto es algo que también es posible con Scriptaculous (o sin librerías), pero en este caso el diseño particular de MooTools nos “orienta” a este tipo de soluciones, más correctas y accesibles.

Aquí se puede ver el ejemplo funcionando.

Fuente:EstadoBeta