Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Utilizzare l'Element.Storage e i metodi della classe Element

Editing del DOM e immagazzinamento dei dati
Editing del DOM e immagazzinamento dei dati
Link copiato negli appunti

Le due lezioni precedenti dedicate alla classe Element ci hanno fornito gli strumenti di base fondamentali per compiere operazioni con gli elementi tramite MooTools. Ma i metodi offerti da Element sono davvero molti e permettono di effettuare qualsiasi operazione di editing del DOM di una pagina. Vediamo ora come mettere in pratica alcuni di essi:

// otteniamo il riferimento al nostro elemento
var el = $('myElement');

// inseriamo l'elemento 'el' in un elemento parente, in modo che risulti il primo elemento figlio
el.inject(myParentElement, 'top');

// ora otteniamo tutti i suoi elementi figli
var children = el.getChildren();

// cloniamo l'elemento in una nuova variabile
var clone = el.clone();

// infine rimuoviamolo dal DOM
el.dispose();

E' inoltre importante ricordare che ogni metodo della classe Element restituisce l'istanza che rappresenta il nostro elemento, permettendoci dunque di "incatenare" le varie chiamate:

el.setStyle('color', 'blue').inject(myParentElement).dispose();

Element.Storage

Dalla versione 1.2, MooTools ci offre un nuovo e potente strumento per effettuare le nostre elaborazioni con gli elementi: l'oggetto Element.Storage. Immaginate che ogni elemento della nostra pagina abbia a disposizione un deposito (uno storage appunto) nel quale possiamo immagazzinare qualsiasi variabile, oggetto o valore e recuperarlo all'occorrenza. I metodi che abbiamo a disposizione per lavorare con lo storage degli elementi sono store e retrieve: il primo permette di salvare una variabile nello storage, il secondo di recuperarne il valore o il riferimento. Vediamo subito un esempio pratico:

// salviamo un semplice valore con la keyword 'initWidth' che rappresenta il valore della larghezza del nostro elemento
el.store('initWidth', el.getStyle('width').toInt());

// successivamente recuperiamo questo valore ed effattuiamone l'alert
alert(el.retrieve('initWidth'));

Ovviamente è possibile salvare all'interno dello storage qualsiasi cosa vogliamo: array,oggetti, stringhe, numeri, riferimenti a funzioni, istanze, Hash e cosi via. Nel successivo esempio viene salvata un'istanza della classe Fx.Tween per creare un'animazione e successivamente azionata:

// salviamo l'istanza
el.store('myEffect', new Fx.Tween(el, {duration: 4000}));

// recuperiamola
var fx = el.retrieve('myEffect');

// successivamente azioniamola...
fx.start('width', [20, 200]);

Utilizzando l'Element.Storage siamo sicuri che i fastidiosi Memory Leak prodotti dai browser (specialmente da Internet Explorer) siano azzerati o ridotti al minimo. Questo permette di risparmiare l'occupazione della memoria e di aumentare la produttività della nostra applicazione. L'Element.Storage è dunque uno strumento molto utile, il cui utilizzo è fortemente consigliato nella gran parte delle applicazioni in cui abbiamo la necessità di lavorare con gli elementi ed i valori che siano in qualche modo ad essi collegati: una volta provato non si abbandonerà più.


Ti consigliamo anche