Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

In questo articolo andremmo ad analizzare uno script relaizzato con jQuery che consente di mostrare e nascondere dinamicamente dei div con un id assegnato.

Senza perdità di generalità genereremo i pulsanti utilizzando liste puntate e numerate.
Per prima cosa creiamo un contenitore dei nostri box e inseriamo al suo interno i bottoni e 3 div con relativi id.

<div id="boxContainer">
<ul>
        <li><a href="#div1">Bottone 1</div></li>
        <li><a href="#div2">Bottone 2</div></li>
        <li><a href="#div3">Bottone 3</div></li>
        <li><a href="#div4">Bottone 4</div></li>
</ul>
<div id="div1">#1</div>
<div id="div2">#2</div>
<div id="div3">#3</div>
<div id="div4">#4</div>
</div>

Quello che vogliamo ottenere è un sistema che al click su un link ci mostri il corrisponsente div e nasconda gli altri.


Inoltre il nostro sistema sarà realizzato in modo da reaglire dinamicamente all’aggiunta di nuovi “bottoni” e div. Essendo più espliciti vogliamo realizzare del codice che non debba essere modifica se cambiamo il codice da quello precendete a questo:

<div id="boxContainer">
<ul>
        <li><a href="#div1">Bottone 1</div></li>
        <li><a href="#div2">Bottone 2</div></li>
        <li><a href="#div3">Bottone 3</div></li>
        <li><a href="#div4">Bottone 4</div></li>
        <li><a href="#div5">Bottone 5</div></li>
</ul>
<div id="div1">#1</div>
<div id="div2">#2</div>
<div id="div3">#3</div>
<div id="div4">#4</div>
<div id="div5">#5</div>
</div>

Supponendo di aver già incluso la libreria jQuery la prima cosa che andiamo a fare è nascondere tutti i div.
Per ottenere questo risultato scriviamo il seguente codice (da inserire dentro il tag head):

$(document).ready(function(){
   $(‘#boxContainer>div’).css(‘position’,‘absolute’).not(‘:first’).hide();
}

In realtà abbiamo fatto qualcosa in più, abbiamo assegnato a tutti gli elementi la posizione assoluta, in tal modo risulteranno tutti “sovrapposti”:
$(‘#boxContainer>div’).css(‘position’,’absolute’)
poi li abbiamo nascosti tutti tranne il primo utilizzando il filtro not:
).not(‘:first’).hide();

Utilizzando il codice scritto fino ad ora, dovremmo avere una lista puntata con i link e il primo div visibile.
Il prossimo passo sarà quello di aggiungere il codice che nasconde il div ora visualizzato e mostra quello corrispondente al link su cui abbiamo cliccato.

$(document).ready(function(){
   $(‘#boxContainer>div’).css(‘position’,‘absolute’).not(‘:first’).hide();
   $(‘#boxContainer>ul>li>a’).click(function(){
        $(‘#boxContainer>div’).fadeOut(1500).filter(this.hash).fadeIn(1500);
        return false;
   });
}

In pratica abbiamo aggiunto 4 righe di codice (di cui una è solo di chiusura parentesi), andiamo a vedere cosa fanno.
La riga:
$(‘#boxContainer>ul>li>a’).click(function(){
recepisce il click su uno dei link contenuti dentro boxContainer>ul>li>a, quando ciò avviene esegue il codice contenuto tra le due graffe di function, quindi prima esegue la riga:
$(‘#boxContainer>div’).fadeOut(1500).filter(this.hash).fadeIn(1500);
e poi
return false;

La riga:
$(‘#boxContainer>div’).fadeOut(1500).filter(this.hash).fadeIn(1500);
Esegue due azioni in sequnenza, per prima cosa esegue un fadeOut su tutti i div contenuti nel boxContainer, per seconda cosa esegue un fadeIn sul div corrispondente all’attributo href del link clickato.
Questo avviene tramite il pezzo di codice
.filter(this.hash).fadeIn(1500)
In pratica filtra gli attuali elementi selezionati in base ai criteri tra parentesi e gli applica un fadeIn.
L’unico elemento che “supera il filtraggio” è quello che si ottiene dalla valutazione di this.hash ed il nodo è tutto qui, this ritorna l’oggetto su cui abbiamo cliccato, this.hash ritorna il valore dell’attributo href dell’oggetto su chi abbiamo cliccato, applicando così un fadeIn all’oggetto desidirato.
Possiamo aggiungere quanti div vogliamo, a patto che ci sia un link con corrispondente href, e il sistema continua a funzionare.
La riga:
return false;
serve a dire al browser che non deve seguire il link (si vede dal fatto che accanto al nome della pagina nella barra degli strumenti non appare #div).

Per vedere il risultato finale: http://demo.studio-88.it/tabbed-fi.html

Twitter