Il costruttore Element, come Class e Hash che abbiamo studiato nelle lezioni precedenti, è un oggetto native non-standard introdotto da MooTools per la creazione di elementi. In realtà gli script della sezione "Element" adempiono a molti compiti, dall'impostazione degli eventi e degli stili fino all'elaborazione delle dimensioni ed allo storage.
Creare un elemento
Per creare un elemento occorre passare all'oggetto Element due argomenti: il tag name desiderato sotto forma di stringa e un oggetto contentente tutte le differenti proprietà. A questo oggetto è possibile passare "events" e "styles" come keywords per il setting di eventi e stili in una dichiarazione compatta ed elegante. Vediamo un esempio di creazione di un elemento di tipo "div":
// creiamo l'elemento
var myDiv = new Element('div', {
'id': 'myDiv',
'styles': {
'padding': '20px 0px',
'width': '200px',
'height': '200px'
},
'events': {
'click': function() {
alert('You have clicked on the element myDiv');
}
}
});
// inseriamolo nella pagina
myDiv.inject(document.body);
Ora che abbiamo creato un elemento, possiamo usufruire di tutti i metodi della classe Element, come inject, dispose, addEvent, setStyles, getStyle, clone e cosi via.
Ottenere i riferimenti ad un elemento e ad una collezione di elementi
Per referenziare un elemento, abbiamo a disposizione la funzione $, alla quale può essere passata una stringa (l'id dell'elemento), un elemento (che viene esteso con i metodi della classe Element) o un oggetto:
// ecco l'elemento con id 'myElement'
var el = $('myElement');
// l'elemento body esteso con i metodi della classe Element
var body = $(document.body);
La funzione $$ permette di referenziare una collezione di elementi e di applicarne i metodi della classe Array:
// ottieni tutte le ancore con class name 'anchor' presenti nell'elemento con id 'myDiv'
var myAnchors = $$('#myDiv a.anchor');
// itera tra tutte le ancore ed effettua l'alert di tutti gli id
myAnchors.each(function(a) {
alert(a.get('id'));
});
Aggiungere, rimuovere ed azionare eventi agli elementi
Tramite i metodi addEvent e addEvents è possibile aggiungere rispettivamente un evento ed una collezione di eventi ad un elemento:
// aggiungi un evento click all'elemento con id 'myDiv'
$('myDiv').addEvent('click', function() {
alert('You have clicked me!');
});
// aggiungo altri due gestori di eventi al mio elemento
$('myDiv').addEvents({
'mouseover': function() {
alert('Mouse over!');
},
'mouseout': function() {
alert('Mouse out!');
}
});
Tramite i metodi removeEvent e removeEvents possiamo rimuovere gli eventi dai nostri elementi (occorre utilizzare il giusto riferimento alla funzione che abbiamo impostato in precedenza con addEvent o addEvents):
// rimuove il gestore dell'evento click referenziato dalla funzione myFirstClickFunction
myDiv.removeEvent('click', myFirstClickFunction);
// rimuove tutti i gestori di eventi di tipo click
myDiv.removeEvents('click');
// rimuove tutti i gestori di eventi
myDiv.removeEvents();
Per azionare un evento infine, possiamo usare il metodo fireEvent:
// aziona l'evento click
myDiv.fireEvent('click');
Conclusione
In questa lezione abbiamo studiato la classe Element, uno dei componenti più importanti offerti da MooTools, e abbiamo visto come creare un elemento, ottenere i riferimenti a singoli elementi o collezioni di elementi e come aggiungere, rimuovere ed azionare gli eventi.
Nella prossima lezione vedremo come impostare gli stili e le proprietà agli elementi e come lavorare con le loro dimensioni.