Enrichir vos formulaires avec Fx.Styles de Mootools

julien lavault — Sun, 27 Apr 2008 18:53:00 +0000

Rajouter un peu d'interactivité est très abordable avec Mootools et son objet Fx.Styles. Quelques lignes peuvent permettre de rajouter un effet progressif de changement de couleur, ainsi qu'un léger effet élastique d'agrandissement sur les champs du formulaire.

Pour effectuer cette opération, il faut découper notre développement en trois étapes:

Déclaration et initialisation des variables,
Initialisation de l'objet Fx.Styles,
On attribue les gestionnaires d'évènement,

Présentation du code source:

window.addEvent('domready', function(){
       ////////////////////////////////////////////////////
       // On déclare les variables
       var type = 'text';
       var duree = 2000;
       var widthIn = '200px';
       var widthOut = '150px';
       var colorIn = '#333333';
       var colorOut = '#CCCCCC';
       var bgIn = '#CCCCCC';
       var bgOut = '#1E1E1E';

        //////////////////////////////////////
        // On boucle sur tout les éléments du formulaire
       var input = $$('#formulaire '+type);
       input.each(function(element) {

           // On initialise l'objet Fx.Styles
           var fxInput = new Fx.Styles(element, {
               duration:duree,
               wait:false,
               transition: Fx.Transitions.Back.easeOut
           });

          // On attache le gestionnaire d'évènement 'focus'
           $(element).addEvent('focus', function(e) {
               e = new Event(e).stop();
               alert('okai');
               fxInput.start({
                   'width': widthIn,
                   'color': colorIn,
                   'background-color': bgIn
               });
           });

            // On attache le gestionnaire d'évènement 'blur'
           $(element).addEvent('blur', function(e) {
               e = new Event(e).stop();
               fxInput.start({
                   'width': widthOut,
                   'color': colorOut,
                   'background-color': bgOut
               });
           });
       });
   });

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

Enrichir vos formulaires avec Fx.Styles de Mootools

Présentation du code source: