venerdì 20 giugno 2008

Mootools. Elementi ed eventi

Prima di proseguire con l'esame della classe QScroller ecco il link per scaricare il pacchetto completo con gli esempi. Decomprimete l'archivio in una cartella del vostro sito web (o localhost) e aprite index.html con il browser. Tenendo a portata di mano il sorgente della classe (file qscroller.js) sarà più facile seguire il discorso.

Continuiamo la spiegazione della funzione initialize() che, ricordo, viene invocata automaticamente alla creazione di un'istanza della classe.

var QScroller = new Class({
  options: { 
    slides: 'qslide',
    direction: 'h',
    duration: 3000,
    auto: false,
    delay: 1000,
    transition: Fx.Transitions.linear
  },
  initialize: function(wrapper,options) { 
    this.setOptions(options); 
    this.wrapper = $(wrapper); (1)
    this.wrapper.setStyles({ (3)
      position: 'relative',
      overflow: 'hidden'
    });
    this.wrapper.addEvent('mouseenter', (4)
      this.fireEvent.pass('onMouseEnter',this));

    this.wrapper.addEvent('mouseleave', 
      this.fireEvent.pass('onMouseLeave',this));
    /* ... */
  },
  /* ... */
});
QScroller.implement(new Options, new Events);

var opt = { 
  auto:true,
  onMouseEnter: function(){this.stop();}, (5)
  onMouseLeave: function(){this.play();}
}
var scroller = new QScroller('qscroller1',opt); (2)

Uno dei maggiori punti di forza di Mootools è la facilità con cui consente di accedere e modificare gli elementi DOM o crearne nuovi dinamicamente. Le funzioni dedicate a questo scopo sono molte, vedremo solo quelle che sono utilizzate nel codice della classe.

La prima che incontriamo è la funzione $ (l'hanno chiamata semplicemente così) che ritorna un elemento DOM il cui ID passiamo come argomento. Nel nostro caso

(1) Salviamo come proprietà wrapper della classe QScroller l'elemento DOM di ID qscroller1 (vedi (2) )

Fatto questo possiamo modificare gli attributi dell'elemento (che come vedremo è il contenitore della nostra animazione)

(3) Impostiamo gli attributi position ed overflow. La funzione setStyle() riceve come argomento un oggetto letterale che contiene le coppie attributo/valore che dobbiamo impostare ( {attributo1: 'valore1', attributo2: 'valore2', ... } ).

Anche solo da queste poche righe penso si possa intuire la facilità con cui Mootools permette di modificare dinamicamente con Javascript il contenuto o l'aspetto di una pagina web.

(4) Come spesso succede in Mootools una sola riga di codice si traduce in una lunga spiegazione.

a) con addEvent() aggiungiamo a this.wrapper (ricordo, l'elemento di ID qscroller1) un event listener per l'evento mouseenter.

b) quando il puntatore del mouse entra (mouseenter appunto) nell'area dell'elemento attiveremo (con fireEvent()) l'evento onMouseEnter della classe QScroller.

c) il che significa che sarà eseguito il codice della funzione onMouseEnter() che abbiamo passato in options (5).

Con questo meccanismo consentiamo agli utenti della classe di personalizzare il codice eseguito al verificarsi di un determinato evento senza dover intervenire sul codice della classe stessa.

Resterebbe da vedere l'uso di pass() e soprattutto perché sia necessario in questo caso, ma spero non si offenda nessuno, rimando la spiegazione ad un'altra volta! L'argomento è complesso e questa breve serie di articoli non vuole certo essere una guida completa a Mootools.

Nessun commento:

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.