Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » MooTools

Pagine:

RSS Download

Introduzione a MooTools

di: Riccardo Degni 16 Luglio 2007

Per quanto riguarda la parte HTML, la struttura del menu è così definita:

Non stupitevi degli span vuoti all'interni dei list item. Nel nostro caso abbiamo deciso di usare come contenuto del menu delle immagini, che vengono inserite tramite CSS.

Al caricamento della pagina vengono selezionati tutti gli elementi (li) con classe kwick e contenuti nella lista (ul) con id kwicks. La presentazione di tali elementi è gestita da un CSS incorporato nell'esempio che potete consultare direttamente.

Ad ognuno di questi elementi vengono assegnati due eventi: all'entrata del mouse (evento personalizzato mouseenter) e all'uscita del mouse (evento personalizzato mouseleave). Quando il mouse passa sopra ad uno di questi elementi, viene azionato l'effetto impostato in precedenza con il costruttore Fx.Elements, che permette di applicare un determinato effetto agendo sulle proprietà indicate ad una collezione di elementi passatagli come primo argomento, i kwicks, appunto. L'elemento che riceve il passaggio del mouse, espande la propria proprietà width a 219px, mentre per tutti gli altri kwick facenti parte della stessa collezione la larghezza viene diminuita a 100px. Quando il mouse esce dall'area di un elemento della collezione passata a Fx.Elements, ad ogni elemento di quest'ultima viene impostata la proprietà width a 117px, ovvero il valore iniziale di ogni elemento. Questo è possibile grazie all'uso della proprietà each, che agendo sugli array o sulle collezioni di elementi od oggetti (che sono di per se degli array) permette di compiere determinate operazioni su ognuno degli elementi della collezione.

Per ora è tutto. In questa introduzione abbiamo analizzato i punti di forza di MooTools e dato brevemente un descrizione delle sue caratteristiche principali, con qualche accenno alla sintassi del codice. In prossimi articoli vedremo in modo pratico cosa si può realizzare con questa libreria, analizzando gli oggetti e i metodi principali che il codice che ci mette a disposizione.