JavaScript  »  Guide  »  Guida MooTools 

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.

Altri articoli

Altre guide

Altre newsletter