evelio.blog();

Posts Tagged ‘mootools

Etiquetas: , ,

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.

Despues de unas largas vacaciones, retomo con unos links:

jQuery

Visual jQuery

Cheat sheet de jQuery

Prototype

8 Semanas de Prototype

Cheat sheet de Prototype

mi favorito y más usado:

MooTools

10 recursos para aprender MooTools 1.2

Cheat sheet de MooTools


Me fui

para

http://evelio.info/


te espero allá :)

Software Libre Rulez!

a

julio 2017
L M X J V S D
« Dic    
 12
3456789
10111213141516
17181920212223
24252627282930
31