Asterisco Blog

Mootools: introduzione

Da tempo desideravo provare qualche framework javascript e dedicarmi al suo studio. Dopo aver studiato script.aculo.us per qualche tempo ho deciso di provare mootools dell’italiano Valerio Proietti. Il file mootools.js è stato confinato in una cartella del mio hard disk fino a tre o quattro giorni fa quando finalmente ho avuto il tempo di fare le mie prime prove.

I plugins

Dalla pagina di download del framework si possono scegliere quali componenti scaricare. In fondo alla pagina rimango piacevolemtne colpito da una sezione dedicata ai Plugin. Colpiscono la mia attenzione "SmoothScroll", per effettuare lo scrolling dei link interni, e "Tips", per creare tooltips. Documentazione alla mano decido di provarli subito.

SmoothScroll

Apro il mio editor e per prima cosa richiamo il file mootools.js:

<script type="text/javascript" src="mootools.js"></script>

Inizio a scrivere il codice javascript relativo allo smoothscroll, dalla documentazione apprendo che ogni codice va posto all’interno dell’evento domready:

window.addEvent('domready', function(){
     new SmoothScroll();
)};

E così potrebbe finire tutto. Disarmato dalla semplicità spulcio la documentazione e cerco le possibili opzioni della classe. Trovo qualcosa che potrebbe fare al caso mio: l’opzione duration. Con tale opzione si può specificare la durata dell’effetto in millisecondi (di default è 500 ms).

new SmoothScroll({ duration: 900 });

Tips

Voglio provare ora a creare dei tooltips per i link. Passo quindi come argomento alla classe il tag a:

window.addEvent('domready', function(){    
        var tip = new Tips($$('a'), { 
             maxTitleChars: 40 
        });
});

Bene in questo modo, però, tutti i link avranno il tooltip, se volessi, invece, che i tooltips li abbiano solo i link di una determinata classe? Niente di più semplice:

var tip = new Tips($$('.classe'));

Volendo invece dare il tooltip a tutti i link contenuti in un div con un determinato id si potrebbe fare qualcosa del genere:

var tip = new Tips($$('#id a'));

La grafica dei tooltip deve essere definita tramite CSS definendo le classi tool-tip, tool-title, tool-text:

.tool-tip { background: url('img/bg.png'); padding: 6px; font-size: 11px; }
.tool-title { font-weight: bold; }
.tool-text { font-style: italic; }

In conclusione

In conclusione adoro letteralmente mootools: mi permette di ottenere ottimi risultati scrivendo pochissime righe di codice! Volendo potete vedere i risultati di poco meno di una mezzora passata su mootools su questa pagina.