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

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
                });
            });
        });
    });

Un peu d'interactivité dans les pages Web statique à la sauce Web 2.0. Pour ce qui ne connaisse pas encore la librairie Javascript scriptaculous, cette librairie sert à manipulée vos objets (<balise>) du dom avec une interactivité hors du commun et à faire des applications en Ajax. Je l'utilise tellement ces derniers temps et c'est d'ailleurs devenu une des spécialités de JFLAD, il était donc naturel que je contribue à sa promotion. Ces scripts de qualités apportent une véritable valeur ajoutée à une page Web statique! Il permet également de facilité la gestion de donnée dans les back-offices, je pense notamment à la gestion simplifier du glisser déposé. Bref une multitudes d'outils à adapté suivant les besoins!
En plus du glissé déposé, il est également possible de faire des transfert de données en Ajax, des effets graphique sur les objets du Dom, des scroll-bars personnalisées...

Voici quelques exemples qui illustreront plus explicitement ma description:

• Drag and Drop AJAX Shopping Cart
• Autocompleting AJAX text fields
• Autocompleting text fields – customized
• Sortable elements w/AJAX callback
• Combination Effects Demo
• GhostlySortableDemo
• SortableFloatsDemo
• SortableListsDemo
• Slider Demo

Finalement l'interactivité ne rime par forcément avec Flash!!! Son utilisation est vraiment très simple et d'une très grande adaptabilité. J'espère que j'aurais contribué à faire de nouveau adeptes.