immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Interfaccia a tab con il plugin jTabber per jQuery

di MaiNick | 2 Lug 2008 | jQuery | 4 Commenti

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:

<div id="nav">
    <a title="primodiv" href="#">Primo</a>
    <a title="secondodiv" href="#">Secondo</a>
    <a title="terzodiv" href="#">Terzo</a></div>
<div id="primodiv" class="hiddencontent">Contenuto del primo tab</div>
<div id="secondodiv" class="hiddencontent">Contenuto del secondo tab</div>
<div id="terzodiv" class="hiddencontent">Contenuto del terzo tab</div>

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).
Tags: , , ,

4 Commenti

  1. Francesco Gavello ha detto:

    Semplice e flessibile. Ottimo 😀

  2. Angelo ha detto:

    Ottima soluzione.. le tab sono molto utili per distribuire i contenuti.. poi con l’effetto jquerry è ancora più piacevole.. ciao, a presto!

  3. Cosimo ha detto:

    Comodo e danno anche uno stile al tuo stile di web designer

Trackbacks

  1. upnews.it ha detto:

    Interfaccia a tab con il plugin jTabber per jQuery | MaiNick Web…

    Ti permette di scorrere i contenuti della pagina, facendo clic sulle schede senza dover ricaricare. E ‘molto flessibile e si integra facilmente nel tuo sito esistente….

Lascia un Commento

^ Torna su