MooTools: creare un accordion

6 aprile 2009

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.

Se vuoi aggiornamenti su MooTools: creare un accordion inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su MooTools: creare un accordion

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy