JavaScript  »  Articoli  »  MooTools 

Slider in azione #1: Change the border width

È giunta l'ora di vedere cosa possiamo realizzare in pratica con il costruttore Slider. Nel primo esempio denominato "Change the border width" troviamo una semplice rappresentazione di questa classe con cui è possibile modificare la larghezza dei bordi di un elemento unicamente trascinando il knob all'interno dello slider. Vediamo il codice:

window.addEvent('domready', function() {

	var slider = new Slider('slider', 'knob', {
		steps: 50,
		range: [0],
		wheel: true,
		onChange: function(val) {
			$('text').setStyle('border-width', val);
		}
	});

});

Al caricamento della pagina creiamo un'istanza della classe Slider. Gli elementi con id 'slider' e 'knob' sono rispettivamente il contenitore ed il knob. La parte interessante è rappresentata dalle opzioni: è possibile variare l'ampiezza dei bordi anche tramite la rotella del mouse (grazie alla proprietà wheel impostata a true). Inoltre, il valore minimo consentito è 0 (non esiste una larghezza negativa) mentre il valore massimo è 50 (più di 50px di larghezza per un bordo mi pareva eccessivo!).

Slider in azione #2: Colors Fun

In questo secondo e più avanzato esempio ho creato due Slider in modalità verticale. Uno permetterà di cambiare il colore di sfondo della nostra pagina mentre l'altro influirà sul colore di primo piano (entrambi i colori saranno compresi tra due limiti determinati). Vediamo subito il codice:

window.addEvent('domready', function() {

	var colors = {bg: [0, 240, 120], fg: [0, 80, 220]};

	var bgColor = function(color){
		$(document.body).setStyle('background-color', color);
	}
	
	var fgColor = function(color){
		$$(document.body, 'h3').setStyle('color', color);
	}

	var bgSlider = new Slider('slider', 'knob', {
		steps: 255,
		wheel: true,
		mode: 'vertical',
		onChange: function(val) {
			colors['bg'][0] = this.step;
			bgColor(colors['bg']);
		}
	});
	
	var fgSlider = new Slider('slider2', 'knob2', {
		steps: 255,
		wheel: true,
		mode: 'vertical',
		onChange: function(val) {
			colors['fg'][0] = this.step;
			colors['fg'][0] = this.step;
			fgColor(colors['fg']);
		}
	});

});

La variabile colors è un oggetto contenente due array che rappresentano la combinazione di colori in formato esadecimale. Le funzioni bgColor e fgColor permettono rispettivamente di cambiare il valore del colore di sfondo e del colore di primo piano della pagina al variare della posizione dei due knob. Esse verranno richiamate nei rispettivi eventi onChange degli Slider.

Infine, ho dichiarato due istanze della classe Slider, una per controllare il colore di sfondo (bgSlider) ed un'altra per il controllo del colore di primo piano (fgSlider). Ecco ancora la demo in azione.

Download degli esempi

In questo pacchetto è possibile scaricare i due esempi visti precedentemente completi di codice Javascript, HTML e CSS.

Conclusione

In questo tutorial abbiamo imparato come utilizzare il costruttore Slider per creare UI molto efficaci ed accattivanti, in pure sembianze Web 2.0. Ovviamente possiamo usare tutta la nostra fantasia per creare applicazioni interessanti usando questo plug-In. Nelle demo ufficiali ad esempio, troviamo degli ottimi esempi di Slider: nel primo è possibile variare le dimensioni del testo di un paragrafo al variare della posizione del knob, mentre nel secondo e più avanzato, abbiamo a disposizione addirittura tre Slider, ognuno rappresentante uno dei colori principali della scala web: red, green e blue.

Variando la posizione dei rispettivi knob, è possibile ottenere il colore desiderato in una modalità alquanto intuitiva ed originale.

Altri articoli

Altre guide

Altre newsletter