MooTools: creare un accordion

Le interfacce di tipo Accordion ("a fisarmonica") sono una delle più popolari tipologie di animazioni venute fuori con l'ondata del cosiddetto Web 2.0. Non a caso, anche a distanza di tempo, sono considerate molto accattivanti e soprattutto molto usabili: è possibile racchiudere molteplici contenuti in un unico contenitore e dare la possibilità all'utente di cambiarlo con gradevoli effetti. Notiziari, feed-reader, portali: sono davvero molte le tipologie di siti che hanno adottato interfacce di tipo Accordion per i motivi più disparati.

MooTools offre un vasto supporto per la creazione di queste interfacce, tramite l'omonima classe Accordion disponibile tra i plug-in della sezione More. In questo tutorial vedremo appunto come avvalerci di questa potente classe e quali strumenti ci mette a disposizione per creare interfacce Accordion.

Risorse ufficiali

Prima di passare all'analisi tecnica del plug-in vi ricordo che potete consultare la documentazione ufficiale della classe Accordion all'indirizzo http://mootools.net/docs/Plugins/Accordion , scaricarla tramite il More Builder e vederla in azione tramite la demo ufficiale rintracciabile all'indirizzo http://demos.mootools.net/Accordion.

Class Accordion

Costruttore

La classe Accordion accetta tre argomenti:

new Accordion(togglers, elements [, options]);

• togglers: la collezione di elementi che fungono da "trigger" per aprire una determinata sezione della nostra interfaccia
• elements: la collezione di elementi che compongono la nostra interfaccia
• options: un oggetto opzionale per personalizzare il comportamente del plug-in

Opzioni

Dato che Accordion estende le funzionalità della classe Fx.Elements, sono disponibili tutte le opzioni di quest'ultima in aggiunta alle seguenti:

• display: un indice numerico indicante l'elemento da mostrare all'inizio (verrà effettuata un'animazione). Di default è pari a 0
• show: l'indice dell'elemento da mostrare all'inizializzazione dell'interfaccia. Di default è pari a 0
• height: valore booleano che, se settato a true, permetterà un'animazione verticale influendo sulle altezze degli elementi dell'interfaccia. Di default è true
• widtht: valore booleano che, se settato a true, permetterà un'animazione orizzontale influendo sulle larghezze degli elementi dell'interfaccia. Di default è false
• opacity: valore booleano che, se settato a true, consentirà la permanenza di effetti fade quando si interagisce con gli elementi dell'interfaccia. Di default è true
• fixedHeight: se settato a false, tutti gli elementi avranno un'altezza fissa. Di default è false
• fixedWidth: se settato a true, tutti gli elementi avranno una larghezza fissa. Di default è false
• alwaysHide: se settato a true, verrà consentita la chiusura di TUTTI gli elementi che compongono l'Accordion, altrimenti, ne rimarrà sempre uno "aperto". Di default è false
• width: se settato a true, verranno creare animazioni orizzontali. Di default è false

Nota: per avvalerci delle funzionalità della classe Accordion di MooTools, dobbiamo fare in modo che le nostre pagine lavorino in modalità Standard.

Eventi

Oltre alle opzioni appena elencate, è ovviamente possibile settare gli eventi per la nostra interfaccia Accordion per gestire cosa accade quando accediamo ad una determinata sezione e quando ne chiudiamo un'altra. Gli eventi disponibili con la classe Accordion sono i seguenti:

• onActive (toggler, element): evento azionato quando un elemento viene selezionato. Vengono passati come argomenti rispettivamente il "toggler" e l'elemento appena visualizzato
• onBackground (toggler, element): evento azionato quando un elemento viene nascosto. Anche in questo caso, vengono passati come argomenti rispettivamente il "toggler" e l'elemento appena nascosto

Metodi

La classe Accordion definisce due metodi molto utili per lavorare con le nostre interfacce: essi sono i metodi addSection e display. Analizziamoli:

• addSection (toggler, element [, position]): permette di aggiungere una nuova sezione all'interno della nostra interfaccia Accordion alla posizione indicata dal terzo parametro opzionale (in caso di mancanza di quest'ultimo, verrà aggiunta alla fine). "toggler" è l'elemento che funge da handle per la nuova sezione, mentre "element" è la sezione vera e propria
• display (index): permetter di visualizzare una data sezione dell'Accordion. Molto utile in caso di azionamenti esterni. Il parametro index è la posizione della sezione desiderata o l'effettivo elemento

Demo

Ora che abbiamo analizzato tutti i componenti della classe Accordion, è ora di vedere come è possibile costruire un'interfaccia basata su quest'ultima e soprattutto di vederla in azione. Per questo tutorial ho preparato 2 demo:

• Simple Accordion
• External Handlers and Events

Simple Accordion

Nella prima demo ho creato una semplice interfaccia Accordion a "tutta pagina" e ad effetto verticale. Non ci sono ulteriori opzioni, ma l'effetto risultante è davvero accattivante e soprattutto molto semplice da realizzare, l'unica linea di codice necessaria (a parte ovviamente il setting dell'evento DomReady) è quella della dichiarazione del costruttore della classe Accordion:

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

	// creazione di un'interfaccia Accordion.
	// gli elementi 'h3.handle' sono gli handle che gestiscono le varie sezioni, mentre gli elementi 'div.sect' sono le sezioni vere e proprie
	var acc = new Accordion('h3.handle', 'div.sect');

});

Il markup HTML necessario per realizzare un'interfaccia Accordion compatibile con MooTools consiste in un elemento principale che funge da contenitore a sua volta contenente gli elementi togglers (di solito headers, come h1, h2 e cosi via...) seguiti dalle sezioni (di solito elementi div) nella sequenza desiderata. Nel caso dell'esempio precedente lo scheletro del nostro markup è il seguente:

<div id="acc">
	<h3 class="handle">...</h3>
	<div class="sect">...</div>
	<h3 class="handle">...</h3>
	<div class="sect">...</div>
	<h3 class="handle">...</h3>
	<div class="sect">...</div>
</div>

Ovviamente è possibile personalizzare le nostre interfacce con i nostri stili personali tramite i CSS.

External handlers and Events

Nella seconda demo ho voluto mostrare una delle caratteristiche a mio avviso più interessanti delle interfacce Accordion, talvolta sottovalutate: gli handler esterni. È possibile infatti azionare l'Accordion tramite specifici handler esterni all'interfaccia stessa, oltre che ovviamente ai toggler interni a quest'ultima. Prendiamo ad esempio il caso in cui si abbiano delle sezioni molto lunghe: l'utente sarebbe costretto ogni volta a scorrere la pagina per ricercare il toggler specifico della sezione desiderata.

Avvalendoci degli handler esterni possiamo aumentare di molto l'usabilità della nostra applicazione creando un menu che permette di navigare all'interno dell'Accordion con molta facilità, indipendemente dalle sue dimensioni.

Sempre in questa demo ho inserito un interssante utilizzo degli eventi della classe Accordion: quando selezioniamo una determinata sezione, essa assumerà un colore decisamente più intenso, mentre le altre torneranno allo stato "normale".

Ecco il codice della demo:

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

	// istanza di Accordion
	var acc = new Accordion('h3.handle', 'div.sect');
	
	// aggiungiamo gli eventi
	acc.addEvents({
		'active': function(hdl, el) {
			$$('div.sect').setStyle('background-color', '#99FFCC');
			el.setStyle('background-color', '#33CCCC');
		},
		
		'backgorund': function(hdl, el) {
			$$('div.sect').setStyle('background-color', '#99FFCC');
			el.setStyle('background-color', '#33CCCC');
		}
	});
	
	// Handlers esterni
	$$('span.hdl').each(function(hdl, i) {
		hdl.addEvent('click', function() {
			acc.display(i);
		});
	});

});

Come è possibile notare, tramite il metodo display della classe Accordion, andiamo a selezionare le sezioni relative all'handler desiderato basandoci sulle loro posizioni.

La relativa parte HTML è molto semplice, basta creare i nostri handler esterni (nel mio caso ho scelto gli elementi span con classe 'hdl') prima del contenitore principale della nostra Accordion:

<span id="home" class="hdl">Home</span> |
<span id="home" class="hdl">Links</span> |
<span id="home" class="hdl">Products</span> |
<span id="home" class="hdl">Related</span>

<div id="acc">
	<h3 class="handle">...</h3>
	<div class="sect">...</div>
	<h3 class="handle">...</h3>
	<div class="sect">...</div>
	<h3 class="handle">...</h3>
	<div class="sect">...</div>
</div>

Gli esempi sono disponibili per il download.