JFLAD Blog: Recherche & développement: Ajax, Javascript, CSS, XHTML, Flash, Référencement, Webmarketing, Open Source, gestion de projet - mootools

Sortie officielle de la nouvelle version du framework javascript mootools en version 1.2

julien lavault — Tue, 17 Jun 2008 13:06:00 +0000

Courant de semaine dernière, mootools a sortie le nouvelle version de son framework javascript en version 1.2 ! Beaucoup de nouveautés sont au rendez-vous, c'est véritablement l'ensemble du framework qui a été re-codé !

Je n'ai pas encore eu le temps de tester, mais j'ai pu constater que le framework a été totalement repensé, avec une nouvelle architecture:

Mootools à bien évidement pensés à la compatibilité des versions, ainsi les anciennes version de mootools seront compatible avec le nouveau framework 1.2.

Petite parenthèse pour le nouveau site internet mootools qui a accompagné la sortie de ce nouveau framework, je le retrouve vraiment moins agréable que l'ancienne version à tous les niveaux: ergonomie, design, interactivité... Vraiment dommage que le site est perdu sa petite touche mootools que tout le monde appréciait !

Il reste à voir si cette nouvelle version va être suivis, donnez moi votre avis !

Effet de survol sur vos éléments avec mootools

julien lavault — Mon, 16 Jun 2008 10:15:00 +0000

Pour enrichir vos sites internet, il peut être sympa d'ajouter des effets de survol progressif à vos liens, boutons, images, illustrations... Pour cela, mootools est parfaitement adapter et permet très facilement d'ajouter un gestionnaire d'évènement sur certains éléments !

Prenons l'exemple d'un effet de changement de couleur progressif de la couleur d'un texte d'un lien au survol de celui ci:

var fx = new Fx.Styles($('idElement'), {duration:200, wait:false});

$('idElement').addEvent('mouseenter', function(){
fx.start({
'background-color': '#666'
});
});

$('idElement').addEvent('mouseleave', function(){
fx.start({
'background-color': '#333'
});
});

Voila, l'exemple est assez simple, il ne reste plus qu'a paramétrer le Fx.Styles et le tour est joué !

Utilisation des tips avec mootools

julien lavault — Wed, 04 Jun 2008 08:25:00 +0000

Moolools permet de faire des infos bulles très sympa sous le nom de 'tips'. Son utilisation est très simple et permet d'ajouter des effets de transition sur l'apparition et la disparition des tips. L'exemple du site mootools est déjà très bien détaillé, je le complèterai en vous expliquant comment enrichir les effets sur vos tips.

/* Ma Tips */

var Tips2 = new Tips($$('.classTips'), {
   // On initilalise l'effet que l'on souhaite mettre en place (par defaut un effet en alpha d'apparition)
   initialize:function(){ this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0); },
   // Gestionnaire d'événement lancé à l'apparition de la Tips
   onShow: function(toolTip) { this.fx.start(1); },
   // Gestionnaire d'évènement lancé à la disparition de la Tips
   onHide: function(toolTip) { this.fx.start(0); }
});

Vous pouvez ainsi facilement rajouter des effet visuel sur l'apparition et la disparition de vos tips, comme un effet de grossissement elastique avec un changement de couleur de fond et de police. En référence pour créer cet effet visuel, le précédent article Enrichir vos formulaire avec FxStyles de mootools.

// On initialise l'objet Fx.Styles
            initialize:function(){ this.fx = new Fx.Styles(this.toolTip, {
               duration:500,
               wait:false,
               transition: Fx.Transitions.Back.easeOut
           });

          // On attache le gestionnaire 'onShow
            onShow: function(toolTip) { this.start({
                   'width': 400,
                   'color': #CCCCCC,
                   'background-color': #CCCCCC
                });
           });

            // On attache le gestionnaire d'évènement 'blur'
            onHide: function(toolTip) { this.start({
                   'width': 250,
                   'color': #FFFFFF,
                   'background-color': #FFFFFF
                });
           });

De nombreuses combinaisons sont possible, a vous de les imaginer!

JFLAD Blog: Recherche & développement: Ajax, Javascript, CSS, XHTML, Flash, Référencement, Webmarketing, Open Source, gestion de projet - mootools

Sortie officielle de la nouvelle version du framework javascript mootools en version 1.2

Core

Native

Class

Element

Utilities

Fx

Request

Plugins

Effet de survol sur vos éléments avec mootools

Utilisation des tips avec mootools