venerdì 27 giugno 2008

Mootools. Creare elementi DOM

L'esame del sorgente della classe QScroller ci porta a spendere qualche parola sulle funzioni di Mootools dedicate alla creazione di elementi DOM.

Riporto di seguito solo le parti di sorgente di cui parleremo

var QScroller = new Class({
  /* ... */
  initialize: function(wrapper,options) {
    /* ... */     
    this.slideOut = new Element('div').setStyles({ (1)
      position: 'absolute',
      overflow: 'hidden',
      top: 0,
      left: 0,
      width: this.wrapper.getStyle('width'),
      height: this.wrapper.getStyle('height')
    }).injectInside(this.wrapper);

    this.slideIn = this.slideOut.clone(); (2)
    this.slideIn.injectInside(this.wrapper);        
    /* ... */
  },
  /* ... */
});
QScroller.implement(new Options, new Events);

(1) Con questa istruzione creiamo un nuovo elemento div, ne impostiamo alcuni attributi con la funzione setStyles() (già incontrata nell'articolo precedente) e lo aggiungiamo come figlio di this.wrapper (l'elemento contenitore anch'esso visto in precedenza) con la funzione injectInside().

Come si vede, una volta che un elemento è stato creato è necessario inserirlo nel documento. Inserire l'elemento in un altro preesistente con la funzione injectInside() è uno dei modi per farlo, ma non l'unico: esistono infatti anche le funzioni injectBefore() e injectAfter() di cui vediamo subito un esempio.

Consideriamo questa porzione di documento html

<div id="elemento0"></div>

Dopo l'esecuzione di questo codice Javascript

<script type="text/javascript">
<!--
window.addEvent('domready', function() {
  var el = $('elemento0');
  var e = new Element('div', {id: 'elemento1'});
  e.injectInside(el);
  var e = new Element('div', {id: 'elemento2'});
  e.injectBefore(el);
  var e = new Element('div', {id: 'elemento3'});
  e.injectAfter(el);
});
//-->
</script>

ecco la struttura del documento visualizzata dal Dom Inspector di Firefox che rende bene l'idea del risultato prodotto dallo script.

Continuiamo con il sorgente di QScroller

(2) L'istruzione clone(), come il nome suggerisce, crea una copia identica di un elemento. I due attributi della classe slideIn e slideOut funzioneranno come elementi di 'transito' per il contenuto delle slide che saranno animate con effetto di scorrimento.

I dettagli devono essere rimandati a quando passeremo dal codice di inizializzazione alle funzioni che svolgono i compiti effettivi per cui è stata sviluppata la classe.

Avevo detto che non sarebbe stata una cosa tanto veloce! I più impazienti hanno già a disposizione il sorgente completo da esaminare.

Nessun commento:

Posta un commento

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