JavaScript  »  Articoli  »  MooTools 

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.

Altri articoli

Altre guide

Altre newsletter