JavaScript  »  Guide  »  Guida jQuery UI 

Il primo widget che prendiamo in considerazione è Accordion (in italiano "fisarmonica"), un controllo attraverso il quale vengono nascosti e mostrati determinati blocchi di dati in base all'interazione con l'utente.

Questo tipo di widget viene utilizzato principalmente in due casi: per ridurre l'ingombro del testo nella pagina oppure per focalizzare l'attenzione dell'utente su una determinata porzione di testo.

Struttura di base

Diversamente da altre librerie UI (per esempio ExtJS), jQuery UI si applica su codice HTML pre-esistente e quindi, per il corretto funzionamento del controllo è necessario dare una specifica struttura al blocco di codice su cui vogliamo applicarlo.

Nel caso di Accordion l'HTML di base è il seguente:

<div id="accordion">
    <h3><a href="#">Primo headerheader</a></h3>
    <div>First contenuto</div>
    <h3><a href="#">Secondo header</a></h3>
    <div>Secondo contenuto</div>
</div>

A questo punto ci basterà richiamare il metodo .accordion() sull'elemento con id accordion per attivare il widget (esempio):

$("#accordion").accordion();

Opzioni

Accordion offre un buon numero di opzioni per personalizzare il comportamento del widget. Le più interessanti sono:

• active : (selettore, jQuery, elemento DOM, numero, booleano - 'first-child')
  indica uno specifico elemento o la sua posizione nell'accordion in modo da renderlo subito visibile una volta applicato il widget.
• autoHeight : (booleano - true)
  indica se applicare l'altezza del contenitore di testo più alto a tutti gli altri elementi. Questa opzione è attiva di default perché rende il controllo più consistente e impedisce che il cambiamento di altezza dell'accordion possa influire sul posizionamento di altri box nell'interfaccia.
• collapsible : (booleano - false)
  strettamente collegato all'opzione precedente, se impostato su true permette di chiudere tutte le aree di testo, facendo collassare completamente il controllo.
• event : (stringa - 'click')
  di default il widget apre e chiude le aree di testo quando l'utente clicca su un header. In alternativa si può indicare un diverso evento per l'attivazione dell'animazione, come 'mouseover'.
  È molto importante capire quale evento associare all'interazione con l'utente, visto che 'mouseover' potrebbe sembrare più diretto, ma comporta anche il rischio di un'attivazione accidentale del widget (esempio).
• navigation : (booleano - false)
  se impostato su true cerca un'ancora che corrisponda all'URL della pagina (location.href) e la attiva. Quest'opzione è molto utile per riferirsi ad una specifica porzione di testo da link esterni alla pagina, nello stesso modo in cui si farebbe con un ancora: http://www.miosito.it/faq.html#lista1.

Metodi

Oltre ai metodi comuni ai widget jQuery UI, .accordion() offre un metodo specifico per attivare una delle sue porzioni di testo, in modo da poter interagire con il controllo anche senza l'azione diretta dell'utente:

$("#accordion").accordion("activate",2);

Eventi

Come per le interazioni, è possibile associare delle funzioni di callback a determinati eventi:

• change: lanciato quando l'accordion cambia. Se il widget è animato, l'evento sarà lanciato al completamento dell'animazione.
• changstart : lanciato appena ha inizio un cambiamento nel widget.

Gli eventi possono essere passati al metodo .accordion() direttamente all'interno dell'oggetto contenente le opzioni, oppure con il metodo .bind():

$(".ui-accordion").accordion({changestart : function() { ... } });
$(".ui-accordion").bind("accordionchangestart", function() { ... });

Ambedue gli eventi accettano due argomenti: l'evento JavaScript nativo e un oggetto ui con le seguenti proprietà:

• .newHeader: un oggetto jQuery dell'header attivo;
• .oldHeader un oggetto jQuery dell'header attivo in precedenza;
• .newContent: un oggetto jQuery del contenuto attivo;
• .oldContent: un oggetto jQuery del contenuto attivo in precedenza.

Altri articoli

Altre guide

Altre newsletter