evelio.blog();

Extendiendo Element de MooTools

Posted on: 2008.agosto.12

Basado en dos artículos de David Walsh (lectura obligada y recomendada):

por cierto gracias!! n_n

He agregado estas funcionalidades a mi “core” de MooTools:

/*
Script: Flash-ShowAndHide.js
An Element extension which allows flash, show and hide (and with fade) an element.

License:
MIT-style license.
*/

Element.implement
({
hide:function()
{
this.setStyle(‘display’, ‘none’);
return this;
},
show:function()
{
this.setStyle(‘display’, ”);
return this;
},
isVisible:function()
{
return this.getStyle(‘display’ ) != ‘none’ ;
},
toggleVisibility:function()
{
this.isVisible() ? this.hide() : this.show();
},
hideFade:function()
{
var el=this;
el.fade(‘out’).get(‘tween’).addEvent(‘complete’, function(){el.hide();});
return this;
},
showFade:function()
{
var el=this;
el.show();
this.fade(‘in’).get(‘tween’).addEvent(‘complete’, function(){el.show();});
return this;
},
toggleVisibilityFade:function()
{
this.isVisible() ? this.hideFade() : this.showFade();
},

flash:function(prop, from, to, reps, dur)
{
if(!reps) { reps = 1; }
if(!prop) { prop = ‘background-color’; }
if(!dur) { dur = 250; }
var tween = this.get(‘tween’,{duration: dur, link: ‘chain’});
for(i=1; i<=reps; i++) { tween.start(prop,from,to).start(prop,to,from); } return tween; } });[/sourcecode] Las diferencia frente a las de David son sutiles pero las recalco:

Element.flash(…)

No“* crea una nueva instancia de Fx.Tween en cada llamada, en su lugar usa Element.tween de MooTools, con esto se logra que al llamar Element.flash(…) cancele el flash anterior y ejecute recién llamado, a diferencia del de David que cuando se llama varias veces ejecuta cada flash lo más rapidamente… además en última instancia returna el efecto para poder encadenarle con chain(…), cuando el efecto finalize.

* En realidad lo recrea dentro de Element (ver Notas de documentación):

When options are passed to either the setter or the getter, the instance will be recreated.

En últimas me parece más optimo

Element.hide() y Element.show()

La única diferencia es que retorna el elemento para poder encadenar fácilmente.

Element.isVisible() y Element.toggleVisibility()

Se agregan estas funciones simples pero útiles.

Element.hideFade(), Element.showFade() y Element.toggleVisibilityFade()

Frente a Element.fancyShow() y Element.fancyHide() de David es que estas realmente las ocultan y las muestran.

me explico, Element.fancyHide() pone la opacidad de Element a 0 con Element.fade(‘out’) y nada más frente a Element.hideFade() que además de esto realmente lo oculta al llamar Element.hide() al terminar el efecto fade, de la misma forma Element.showFade() también realmente muestra el elemento 😛

Al hacer esto, nos permite realmente saber si el elemento es visible o no con Element.isVisible() además podemos alternar la visibilidad con efecto de desvanecimiento con Element.toggleVisibilityFade().

Eso es todo lo que extendí u optimice al código de David.

Anuncios

2 comentarios to "Extendiendo Element de MooTools"

Bastante útil, aunque no entiendo muy bien la necesidad de retornar el elemento en algunos métodos como hide() (me refiero al return this).

Aunque supongo que tendrá su explicación.

lo de return this; es para poder encadenar es decir que pueda hacer algo similar a esto:

var el=$('someElement');

el.hideFade().showFade().flash('border-color', '#000', '#fff', 3, 750)

Nota: el código se puede optimizar aún más 😛

un saludo

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

Me fui

para

http://evelio.info/


te espero allá :)

Software Libre Rulez!

a

agosto 2008
L M X J V S D
« Jul   Sep »
 123
45678910
11121314151617
18192021222324
25262728293031
A %d blogueros les gusta esto: