jQuery Plugin: Easy Accordion

Blog

Un paio di mesi fa mi sono trovato alla ricerca di un plugin per jQuery che permettesse di creare slider orizzontali con effetto fisarmonica. Mi serviva una soluzione semplice e veloce che potesse essere utilizzata all’interno di uno dei miei progetti. A prima vista, Slidedeck è sembrato essere ciò di cui avevo bisogno. Ben presto, tuttavia, si è rivelato essere molto meno flessibile di quanto mi sarei aspettato.
Per questo motivo ho deciso di creare un mio plugin.

Non appena ho acquistato Slidedeck, al prezzo non proprio modico di 99$, ho notato alcuni aspetti che non mi hanno soddisfatto appieno.

Per prima cosa, avrei voluto modificare lo script in modo da cambiare leggermente il comportamento dello slider ma ho subito realizzato che non avrei potuto cambiare alcunchè, in quanto il plugin che avevo acquistato era integralmente criptato. La criptatura viene ovviamente impiegata in modo da impedire la libera condivisione dei file sorgenti e da preservare i guadagni della compagnia che ha prodotto Slidedeck. Tuttavia, il risvolto negativo e, a parer mio anche abbastanza fastidioso, della criptatura è che dopo aver speso 99$ ottieni qualcosa che non puoi in alcun modo modificare.

Inoltre, Internet Explore 6 non è supportato e questo non viene detto in maniera esplicita sul sito di Slidedeck. So a cosa state pensando… “IE6? Quel browser è ormai morto da tempo amico! Perchè dovresti aspettarti che venga ancora supportato?” Dunque, io sono completamente d’accordo sul fatto che dovremmo tutti abbandonare il supporto per IE6, tuttavia, posseggo ancora diversi clienti che, per svariati motivi, hanno bisogno che il loro sito sia fruibile con IE6. E no, non posso liberarmi di loro!

Per tutte queste ragioni, ho deciso di realizzare un mio plugin per gestire slideshow orizzontali con effetto fisarmonica. Questo progetto è stato molto più complesso di quello intrapreso per il plugin Easy List Splitter. Creare un plugin del genere è infatti molto più complicato e sono state necessarie diverse nottate e weekend di lavoro per giungere al termine. Il risultato è però molto appagante e spero vi possa aiutare ogni qual volta avrete bisogno di uno slider orizzontale altamente flessibile, capace di gestire qualunque tipologia di contenuto (testo semplice, immagini, liste, div, etc.).

Un ringraziamento speciale va a Andrew Thompson perchè senza il suo prezioso aiuto sarei probabilmente ancora bloccato a cercar di far funzionare istanze multiple dello slider sulla stessa pagina.

Come funziona?

Il plugin Easy Accordion prende le costre definition lists (DTs) e genera un piacevole e funzionale slider orizzontale con effetto fisarmonica. Potete poi decidere se impostare un autoplay in modo da creare una slideshow a tempo oppure se lasciarlo statico.

Potete osservare il plugin Easy Accordion in azione qui.

Cosa introduce di nuovo?

Easy Accordion mantiene l’HTML al minimo, è ottimizzato per i motori di ricerca e completamente accessibile, utilizza i CSS per ruotare i titoli delle slide (non c’è bisogno di usare immagini!), funziona in tutti i maggiori browsers, consente di impostare l’autoplay, è opensource e completamente personalizzabile e, ciò che conta di più, è gratis!

Funzionalità

  • Crea facilmente piacevoli e funzionali slider con effetto fisarmonica
  • Decidi se animare lo slider automaticamente oppure no
  • Inserisci instanze multiple dello slider nella stessa pagina
  • Imposta la slide che si aprirà per prima quando l’utente carica la pagin
  • Scegli se mantenere o rimuovere il numero delle slide
  • Il testo è ruotato grazie ai CSS. Non servono immagini!
  • Easy Accordion è completamente personalizzabile attraverso i CSS: potete cambiare l’altezza, la larghezza, impostare bordi, padding, utilizzare immagini come background e molto altro ancora
  • Accessibile e SEO friendly
  • Puoi gestire sottoforma di slide qualcunque tipo di contenuto (div, testo, immagini, liste, etc.)
  • Pesa meno di 8KB!
  • Non dipende da altri plugin!

Aggiunte previste

Sono aperto a suggerimenti.

Utilizzo

Di seguito trovate l’HTML per una semplice lista di definizioni inclusa all’interno di un DIV contenitore:

<div id="your-accordion-container">
   <dl>
      <dt>Title slide</dt>
      <dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
      <dt>One more</dt>
      <dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
      <dt>Another slide</dt>
      <dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
   </dl>
</div>

Dobbiamo ora includere tre file differenti nella head del documento: la libreria di jQuery, il plugin Easy Accordion e il nostro file JavaScript dal quale attiveremo il plugin. Se non sapete come fare a includere jQuery nelle vostre pagine trovate una spiegazione dettagliata nel mio primo tutorial per jQuery.

Potete attivare il plugin utilizzando i numerosi selettori resi disponibili da jQuery.
Il plugin accetta diversi parametri in entrata.

Parametri

Assicuratevi di includere la vostra lista di definizioni (DT) all’interno di un DIV contenitore e di chiamare il plugin sul DIV e non direttamente sulla lista:

$('#il-vostro-contenitore').easyAccordion();

Se non passate alcun parametro il plugin produrrà per default un semplice slider con numero delle slide e senza autoplay. Per espandere le slide nascoste gli utenti dovranno cliccare sui rispettivi titoli.

Per impostare l’autoplay dovete semplicemente settare il parametro “autostart” su “true” e “slideInterval” (in millisecondi) su un qualunque numero come viene mostrato di seguito:

$('#il-vostro-contenitore').easyAccordion({
   autoStart: true,
   slideInterval: 5000
});

In questo esempio il plugin cambierà slide ogni 5 secondi. Non appena sarà giunto all’ultima slide ripartirà dall’inizio. Se cliccate su uno dei titoli delle slide, la slideshow si ferma, permettendo all’utente di leggere con tranquillità il contenuto e di proseguire la navigazione delle slide in maniera autonoma.

Potete anche rimuovere il numero delle slide impostando il parametro “slideNum” su “false” come viene mostrato di seguito:

$('#il-vostro-contenitore').easyAccordion({
   autoStart: true,
   slideInterval: 3000,
   slideNum: false
});

Personalizzare il CSS

Nella pagina demo troverete due diverse parti di CSS, evidenziate da commenti. La prima non dovrebbe essere modificata a meno che non siate più che sicuri di cio’ che state facendo. La seconda parte, invece, può essere cambiata al fine di personalizzare lo slider in base alle vostre necessità.

Supporto Browser

Il plugin Easy Accordion per jQuery è stato testato sui seguenti browser:
Firefox 3.5+, IE6/7/8, Safari 5+ e Google Chrome.

Conclusioni

Easy Accordion è completamente gratuito, tuttavia, visto che mi ha procurato diverse nottate insonni, una donazione libera sarebbe particolarmente gradita. Anche un post sul vostro blog con link al mio articolo verrebbe molto apprezzato!
Potete scaricare l’esempio della pagina demo qui (250KB – ZIP) oppure scaricare il file JavaScript del plugin di seguito.

Offrici una birra!

Postato martedì 14 settembre 2010 alle 14:48

16 commenti all'articolo

  1. Ciao
    Ottimo plugin e sito in generale.
    La mia domanda è semplice si può far funzionare il plugin con l’hover del mouse invece che col click?

  2. Dani scrive:

    Hi!

    Great plugin, but I got a strange issue. It doesn’t work with the latest versions of jQuery (i.e: 1.8 or 1.9).

    Any ideas on how to fix that?

  3. Andrea scrive:

    Bellissimo e grazie della possibilità di prenderlo gratuitamente.
    Ho riscontrato un problema su Chrome: il primo presenta delle righe verticale vicinissime quando è chiuso e più larghe quando si attiva. E’ possibile risolverlo?
    Grazie ancora

  4. Antonio scrive:

    Ciao… Complimenti per l’ottimo lavoro svolto. volevo chiedere delucidazioni in merito ad uno strano comportamento dopo il refresh della pagina dell’accordion. ovviamente quello implementato da me, perchè ho fatto alcune prove e, la tua pagina demo, non ne soffre. in sostanza quando viene premuto f5 il dd assume proporzioni strane, e anche se si ritorna successivamente. ho notato anche che, con google chrome, viene visualizzato male, appaiono delle righe strane, anche la tua demo. ti ringrazio… e scusami il disturbo.
    ti lascio l’indirizzo se avessi voglia di dargli un’occhiata.
    treccina4ever.webnet32.com/rossocanova

  5. nereo scrive:

    Grandissimi! E’ un plugin fantastico, leggero, pulito e perfetto! Sarebbe ancora più “fico” se si potesse impostare una specie di rimbalzo quando la fisarmonica viene aperta. non ho ancora guardato il codice, ma credo che un onmouseover possa sostituire il click per aprire le tendine. grazie mille! a prestissimo

  6. stefania scrive:

    Ciao a tutti! vi scrivo perchè ho la necessità di mostrare l’accordion tutto chiuso, cioè con nessun elemento “active” all’avvio. E’ possibile specificando qualche parametro? altrimenti come posso fare? Grazie

  7. Marco scrive:

    grande plugin, complimenti.
    mi è stato davvero utile per un accordion richiestomi per IE6 :)
    ho però riscontrato problemi su IE8 e 9 perchè non mi va il click sul DT chiuso. come mai? è possibile risolverlo? ho notato che l’unica area cliccabile rimane in cima al DT. come se IE dopo averlo girato non gli associa cmq le proprietà della versione orizzontale del DT… ciao e grazie ancora

  8. Jack Clarke scrive:

    Great script but is it possible to add an external navigation using the numbers? Just like this: https://evolse.com/easyaccordionnav.png

  9. mixio scrive:

    Grazie e complimenti!

  10. Playbasket.it scrive:

    Grazie mille, adesso provo a smanetterci un pò.

  11. Chiara scrive:

    Un ottimo lavoro!!!
    Grazie per averlo messo a disposizione di tutti!

  12. Gianni scrive:

    Ciao Andrea,
    Il plugin è davvero ben fatto e ti ringrazio per la possibilità di evitare di spendere soldi per qualcosa che in effetti è davero ostico da utilizzare!

    L’ unica cosa è che con Opera ha qualche problema nella visualizzazione dei tab in verticale (rimangono orizzontali) questo solo per per tua conoscenza in quanto non credo ci siano molti utenti che utilzzano questo browser…

    Buona giornata!

  13. @Davide: Grazie mille per la recensione e complimenti per il vostro sito!

    @Bildworter: Non esiste un plugin per WordPress. Puoi comunque utilizzare senza alcun problema l’accordion all’interno dei tuoi template e gestire poi i contenuti delle slide in maniera statica all’interno dello stesso file di template oppure in maniera dinamica utilizzando ad esempio il plugin Improved Page Include. In questo caso, potrai inserire all’interno di una pagina il codice dell’accordion (la definition list) e poi includere tramite il plugin quella pagina/codice nel tuo file di template.

    @WebDesignerMilano: Grazie mille per i complimenti. E’ per lo stesso motivo che ho deciso di sviluppare questo plugin… perchè non trovavo nessun plugin flessibile e semplice da usare.

  14. Ottimo plug-in, ho cercato qualcosa di simile l’anno scorso per alcuni progetti ma non ho trovato nulla di così semplice.
    Complimenti!

  15. Bildworter scrive:

    Molto interessante. Esiste già in versione per wordpress?

  16. Davide scrive:

    Con estremo piacere (visto che lo sviluppatore è italiano) abbiamo provveduto a recensire questo ottimo plugin sul nostro sito.

    Complimenti Andrea!!!

    Restiamo in attesa delle tue prossime creazioni ;-)

Lascia un commento

Votate l'articolo in modo da aiutarci a decidere i temi su cui verteranno i futuri post. I commenti sono moderati. Vi chiediamo cortesemente di non postare link pubblicitari e di non fare alcun tipo di spam.