JavaScript  »  Articoli  »  MooTools 

Ora che abbiamo appreso le basi ed i segreti fondamentali del framework tramite la Guida alla versione 1.2, è il momento di passare allo studio dei plug-in ufficiali offerti nativamente dal team di sviluppo di MooTools.

Introduzione ai plug-In

Dalla versione 1.2 in poi, abbiamo una pratica divisione tra componenti "core" e componenti "more". I plug-in fanno tutti parte di questa seconda categoria, rappresentando appunto una sorta di estensione ufficiale. In questo tutorial vedremo come utilizzare Slider, un componente che permette di creare interfacce Web 2.0 e UI molto efficaci. Tramite le istanze della classe Slider, infatti, possiamo ricreare quelle "barre di controllo" tipiche ad esempio dei programmi di riproduzione multimediale che permettono di scorrere velocemente il video o il suono, passare ad una determinata posizione (contrassegnata dai minuti e secondi) o ancora aumentare/diminuire il volume.

In ambiente web la classe Slider può essere utilizzata dunque in molte modalità davvero interessanti che vedremo successivamente nell'articolo.

La classe Slider

Partiamo dalla parte teorica. In sostanza lo Slider di MooTools è costituito da due parti fondamentali: il contenitore ed il knob (lancetta o cursore trascinabile nel contenitore). Trascinando il knob all'interno del nostro contenitore possiamo decidere cosa deve accadere in risposta al movimento nella nostra applicazione. Vediamo come dichiarare un'istanza del costruttore Slider:

var slider = new Slider(element, knob [, options]);

Come detto in precedenza, occorre passare l'elemento che funge da contenitore, l'elemento che rappresenta il knob e opzionalmente l'oggetto options. Tra le proprietà che possiamo impostare nelle opzioni troviamo le seguenti:

• range: un array di valori che rappresentano il limite minimo ed il limite massimo che lo slider può acquistare. Di default è false.
• wheel: se impostato a true permette di muovere il knob addizionalmente tramite la rotella del mouse.
• steps: il numero di step in cui viene suddiviso il contenitore. Di default è 100.
• mode: la modalità dello slider. Può essere 'horizontal' (valore di default) o 'vertical'.
• offset: l'offset di partenza del knob, relativo al contenitore. Di default è 0. Settando questa proprietà ad un valore diverso da 0, il knob potrà essere trascinato al di fuori degli "argini" del contenitore rispettivamente all'inizio ed alla fine.
• snap: se impostato a true abilita lo snapping. Di default è false.

Tra gli eventi che possiamo agganciare alle nostre istanze troviamo invece:

• onChange: scatta quando il precedente valore dello slider viene modificato (ad esempio quando trasciniamo il knob). Questo valore viene passato come parametro.
• onComplete: scatta quando il dragging viene interrotto o completato.
• onTick: scatta quando il knob viene trascinato. La posizione viene passata come unico parametro di questa funzione.

Abbiamo infine a disposizione un unico metodo, set, che permette di impostare lo slider ad un determinato valore, rappresentato dall'argomento passato:

// istanza dello Slider
var slider = new Slider('element', 'knob');

// impostiamo il valore di partenza
slider.set(0);

// registriamo degli eventi per cambiare il valore dello Slider
$('changeValue').addEvent('click', function() {
	slider.set(140);
});

$('changeValueAgain').addEvent('click', function() {
	slider.set(20);
});

Altri articoli

Altre guide

Altre newsletter