Plugi jTabber per jQuery

L’obiettivo di questo articolo è di creare un’interfaccia a tab con l’uso di JavaScript e di modelli CSS, in maniera semplice, sfruttando le potenzialità di jQuery.

I menu a “schede”, o a “linguette”, in inglese tab, consentono di “nascondere” parti di testo di una pagina HTML, consentendo di snellire la quantità di informazioni presentate: nello stesso “box” sarà visualizzato un contenuto diverso a seconda della linguetta attiva.

Per prima cosa suggerirei di vedere cosa fa il plugin stesso andando alla pagina demo del suo autore. Nella pagina dedicata al progetto troviamo il link al pacchetto della demo stessa, cioè un file zippato contenente sia la stessa demo sia tutti i file necessari, inclusa la libreria jQuery e l’ultima versione del plugin.

Vediamo ora le instruzioni passo-passo per costruire la nostra interfaccia.

All’interno del body della pagina HTML il plugin jTabber richiede che si utilizzi una struttura come questa:



Contenuto del primo tab


Contenuto del secondo tab


Contenuto del terzo tab

Abbiamo un elemento <div> con id=nav, al cui interno troviamo tanti links quante sono le linguette da visualizzare, seguiti da alcune sezioni <div>. Le sezioni <div> contengono il testo da visualizzare.

Gli id delle sezioni <div> possono essere tutti rinominati a proprio piacere, l’unico vincolo devono essere uguali ai nomi presenti nei tag <title> delle corrispondenti linguette.

Includiamo nel modo consueto all’interno della sezione <head> i due principali componenti JavaScript che ci necessitano: la libreria jQuery e il plugin jTabber:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jtabber.js" type="text/javascript"></script>

Subito dopo, per mostrare e inizializzare l’interfaccia tab, aggiungeremo:

<script type="text/javascript">
    $(document).ready(function(){
        $.jtabber({
            mainLinkTag: "#nav a",
            activeLinkClass: "selected",
            hiddenContentClass: "hiddencontent",
            showDefaultTab: 1, //
            showErrors: true,
            effect: 'slide',
            effectSpeed: 'fast'
        })
    })
</script>

Le opzioni avanzate, per personalizzare il plugin, devono essere passate come parametri tramite la funzione $.jtabber( ).

I parametri sono delle coppie chiave: valore separate da virgole:

  • mainLinkTag - il nome del selettore collegato al tag <div> (in questo caso si sta utilizzando ‘#nav a’)
  • activeLinkClass - la casse che si desidera assegnare al link quando è cliccato (la classe di default è ’selected’)
  • hiddenContentClass - il nome della classe delle sezioni <div> dei contenuti nascosti fino a quando la scheda non è cliccata
  • showDefaultTab - valore intero che indica quale scheda aprire una volta che la pagina è caricata
  • showErrors - valore booleano (true/false) se si desidera visualizzare errori del plugin
  • effect - è possibile visualizzare il contenuto con un effetto (’slide’ - diapositiva, ‘fade’ - dissolvenza) o nessun tipo di effeto (’null’)
  • effectSpeed - velocità dell’effetto (’slow’ - lento, ‘medium’, ‘fast’ - veloce).
Condividi:
  • del.icio.us
  • Digg
  • Reddit
  • Facebook
  • Upnews
  • Wikio IT
  • Segnalo
  • StumbleUpon
  • Google
  • E-mail this story to a friend!