Tutoriel Mootools : Chain :

Comment utiliser mootools :

Pour pouvoir utiliser mootools il faudra télécharger la librairie, pour cela rien de plus simple.

Vous pouvez directement la telecharger sur cette adresse : http://mootools.net/download, vous devrez cocher la case Class pour pouvoir utiliser le package Class.js.

Spécifications de Chain

Chain est une fonctionnalité native de mootools, on peut donc l'utiliser de n'importe quelle fonction.

Exemple d'utilisation de Chain :

HTML

<div id="monitor"></div>

<div id="chainTest"></div>

Javascript

var monEffet = new Fx.Styles('chainTest');

var legend = $('monitor');
legend.setText("[ Début ]");

monEffet.start({ width:'200px' }).chain(
  function() {
    // Etape 1
    legend.setText("-] Etape 1 ...");
    monEffet.start({ 'background-color':'#BF2', color:'#000'});
  }
).chain (
  function(){
    ;// Etape 2
    legend.setText("-]] Etape 2 ...");
    monEffet.start.delay( 1000, monEffet,{ opacity:0 });
  }
).chain (
  function(){
    // Etape 3
    legend.setText("-]]] Etape 3 ...");
    monEffet.start.delay( 3000, monEffet,{ 'background-color':'#0C3', color:'#fff', opacity:1 });
  }
).chain (
  function(){
    // Fin
    legend.setText("[ Fin ]");
    if (confirm("T'as compris le chainage ?")) $('chainTest').setText("Eh ben t'es fort !");
    else $('chainTest').setText("Concentre toi et relance l'animation !");
    legend.setText("Lancez la chaine d'exécution en cliquant ici");
  }
);
Lancez la chaine d'exécution en cliquant ici

Chain appartient au package mootools Class.extras.js

  • Création :
  • Pour une nouvelle classe ( Interfaces) : var maClasse = new Class( { Implements: Chain } );
    Pour une classe Existante ( Interfaces ) maClasse.implement(Chain);
    Constructeur var maChaine = new Chain;

La classe Chain retient trois méthodes :

  • Méthodes :
  • chain(fonction) : ajoute une fonction à l'instance d'exécution de la chaine.
    Exemple d'utilisation de Chain.chain : var affiche = function () {
      alert('Salut !');
    ;};

    //on chaine l'appel à affiche avec l'appel de la fonction qui est à l'intérieur
    affiche().chain(function () {
      alert('Ca va? !');
    });
  • Note :
    Contexte d'execution des exemples suivants : var maClasse = new Class({
      Implements: Chain,
      initialize: function(){
        this.chain.apply(this, arguments);
      }
    });

    var monObjet = new maClasse(
      function(){ alert('Salut !'); },
      function(){ alert('Tu va bien?'); },
      function(){ alert('Ciao'); }
    );
  • callChain: Exécute la première fonction de la chaine et l'enlever de l'instance
    Exemple d'utilisation de Chain.callChain: monObjet.callChain(); //Appelle la chaine initialisée précédemment
  • clearChain: Vide la chaine d'exécution
    Exemple d'utilisation de Chain.clearChain: monObjet.clearChain(); //Vide la chaine initialisée précédemment

Extensions des classes sur mootools :

Mooooooooo

Je pense avoir contourné les aspects basiques d'utilisation de la classe mootools Chain.

Pour plus de détails visitez la spécification complète ce la classe Chain ici.

Je vous présenterais dans mon prochain billet l'utilisation des classe et méthodes de Events et Options, les deux autres classes du package Class.extras.js

D'ici la je vous dit à bientôt, si vous avez des questions n'hésitez pas (H)