giovedì 24 luglio 2008

Mootools. Ancora la classe QScroller

Concludiamo l'esame della funzione initialize() della classe QScroller.

var QScroller = new Class({
  /*...*/
  initialize: function(wrapper,options) {
    /*...*/  
    this.slides = $$('.'+this.options.slides); (1)
    
    if($defined(this.options.buttons)) {
      if($defined(this.options.buttons.next)) {
        $(this.options.buttons.next).addEvent('click', 
        this.next.bind(this)); (2)
      }
      /*...*/ 
    }
    this.auto = this.options.auto;
    this.idxSlide = 0;
    this.step = 0;
    this.isFirst = true;
  },
  load: function() { (3)
    if(!this.isFirst) {
      this.idxSlide += this.step;
      if(this.idxSlide > this.slides.length-1) {
        this.idxSlide = 0;
      } else if(this.idxSlide < 0) {
        this.idxSlide = this.slides.length-1;
      }
    }
    this.curSlide = this.slides[this.idxSlide].clone();
    this.show();
  },
  /*...*/
});
QScroller.implement(new Options, new Events);

(1) La funzione $$ ritorna un array di elementi DOM selezionati, in questo caso, in base ad un selettore css che passiamo come argomento.

this.options.slides come abbiamo visto è un'opzione di configurazione della classe. Quindi ad esempio

this.slides = $$('.qslide');

Seleziona e memorizza nell'attributo slides della classe tutti gli elementi di classe qslide. Controllando il sorgente html degli esempi è facile capire che questi elementi sono le div che contengono il testo o le immagini da far scorrere.

(2) Aggiunge un event listener per l'evento click ad ogni pulsante (next, prev, play, stop). AddEvent() l'abbiamo già incontrata (vedi questo post), per ulteriori dettagli rimando al sorgente degli esempi 2 e 3 (nel pacchetto di installazione) dove si vede come tramite il meccanismo delle options viene passato alla classe un oggetto buttons con gli ID dei link che servono per controllare lo scorrimento delle immagini.

Il codice rimanente serve solo ad inizializzare alcuni attributi il cui utilizzo sarà visto in seguito. Possiamo proseguire con le altre funzioni.

(3) il funzionamento di load() dovrebbe, almeno spero, essere del tutto intuitivo.

Come abbiamo detto sopra slides è un array con gli elementi (div) contenenti il testo e/o le immagini da far scorrere. La funzione memorizza in curSlide un clone del prossimo elemento da visualizzare in base alla direzione corrente dello scorrimento (step=1 avanti, step=-1 indietro).

È chiaro che devono esserci dei controlli per rendere ciclico il movimento. Se ci si sposta avanti quando siamo posizionati sull'ultimo elemento (idxSlide uguale a slides.length-1) si visualizza il primo, se ci si sposta indietro quando siamo posizionati sul primo elemento (idxSlide uguale a zero) si visualizza l'ultimo.

E anche per questa volta è tutto.

Nessun commento:

Posta un commento

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