Blog trasferito su
www.NoizExperience.com

13 giugno, 2008

Come si crea un pannello tab




tab mostra nascondi con javascript


La comodità di avere una sezione del nostro sito con un pannello tab ci permette di raccogliere in modo ordinato i contenuti e sopratutto di evitare di ricaricare la pagina. Questa soluzione si rivela utile nelle home-page, dove puoi utilizzarlo per catalogare le ultime news, si può utilizzare per creare una gallery o perfino per realizzare un menu con sottovoci. Nell'esempio mi sono divertito ad usare le tab per realizzare un mini-sito, soluzione interessante per quei siti piccoli che raccolgono solo testo.

Vediamo come funziona.
Inanzitutto copia e incolla questo breve javascript prima del tag </head>:

<script type="text/javascript" language="javascript">

onload = function() {
var e, i = 0;
while (e = document.getElementById('gallery').getElementsByTagName ('DIV') [i++]) {
if (e.className == 'on' || e.className == 'off') {
e.onclick = function () {
var getEls = document.getElementsByTagName('DIV');
for (var z=0; z<getEls.length; z++) {
getEls[z].className=getEls[z].className.replace('show', 'hide');
getEls[z].className=getEls[z].className.replace('on', 'off');
}
this.className = 'on';
var max = this.getAttribute('title');
document.getElementById(max).className = "show";}}}}
</script>


Ora copia e incolla nel tuo codice css (se è nella pagina stessa inseriscilo tra i tag style, altrimenti se è in un foglio esterno copiacelo alla fine) queste classi e id:

#gallery {display:block; width:100%; height:35px; background-color:#f1f1f1; border-top:1px dashed #999; border-bottom:1px dashed #666; margin:0 auto; overflow:hidden;}

#gallery div.off {float:left; position:relative; z-index:99; width:80px; height:35px; line-height:35px; background-color:#f0f0f0; padding:0 10px; background-image:none}

#gallery div.off:hover {color:#FF3300; background-color:#f6f6f6; background-image:url(backbutton.gif) }

#gallery div.on {float:left; position:relative; z-index:100; width:80px; height:35px; line-height:35px; background-color:#fcf6f6; padding:0 10px; background-image:url('backbutton.gif') }

div.hide {display:none; width:0; overflow:hidden; }

div.show {display:block; clear:left; position:relative; z-index:50; margin:0 auto; width:90%; height:300px; padding:5%; background-color:#fcf6f6; }


Veniamo all'html. Crea un div con id="gallery" e all'interno metti il menù che controlla le tab. Inserisci la classe on nel prima voce, mentre tutte le altre avranno classe off. Poi inserisci ad ogni voce ll'attributo title con il nome della sezione (per essere più semplice ti conviene metterci lo stesso nome che compare sul menù). Come nell'esempio:

<div id="gallery">

<div class="on" title="Home"><a href="#">Home</a></div>
<div class="off" title="ChiSono"><a href="#">Chi Sono</a></div>
<div class="off" title="ImieiLavori"><a href="#">I miei lavori</a></div>
<div class="off" title="Contattami"><a href="#">Contattami</a></div>

</div>


Ora crea le div che visualizzeranno i contenuti. Attribuiscili un id uguale al title che hai usato nella voce correlata del menu, e dai la classe show al primo div, e hide per tutte le altre. Come nell'esempio:

<div class="show" id="Home">Questa è la Home Page</div>
<div class="hide" id="ChiSono">Ecco finalmente Chi Sono</div>
<div class="hide" id="ImieiLavori">L'elenco dei miei Lavori</div>
<div class="hide" id="Contattami">Scopri come contattami</div>


Come puoi vedere è molto semplice. Ovviamente puoi adattare le tab alla grafica del tuo blog o sito intervenendo direttamente sul Css che abbiamo utilizzato. Per capire meglio il codice puoi scaricare la demo e analizzarla. Se hai qualche dubbio o problema a riguardo sono a disposizione.

Scarica la demo.


Articoli correlati per categorie



7 commenti!:

Overlord ha detto...

Ottimo manuale

Anonimo ha detto...

complimenti....interessantissimo

Redazione ha detto...

Ciao,
innanzitutto ti meriti i migliori complimenti sia per il blog sia per la qualià dei post!
Ho xò un problema: il foglio di stile css non so dov'è, ne riesco a trovare nell'html i tag style. Spero mi puoi aitare. Grazie

Angelo ha detto...

Ciao.. tranquillo, il tag style c'è.. vedo che il tuo Blog Vox Populu sta su blogger. Fai così: vai su modifica html: tra le prime righe del codice troverai il tag title, poco più in basso trovi questa scritta /* Variable definitions , quindi copia il codice subito prima.. Fammi sapere come va..

Redazione ha detto...

Ciao Angelo,
scusa se torno a disturbarti. Ho seguito la procedura descritta nel post ma, quando ho provato a vedere il risultato in anteprima, mi ha dato questo errore: Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
Messaggio di errore XML: Element type "getEls.length" must be followed by either attribute specifications, ">" or "/>".
Non ti so dire dove ho sbagliato. Grazie in anticipo

Angelo ha detto...

no, non disturbi, stai tranquillo! Quando c'è questo tipo di errore significa che hai cancellato la chiusura di un tag.. Quando inserisci il codice stai attento a non cancellarne altro..
o un'altra possibile proplema può essere che stai inserendo del codice, prima della chiusura di un'altro.. fammi capire un pò così posso aiutarti meglio, cosa stai realizzando?! che codice stai inserendo?! se è molto lungo rispondi via email.. Ciao, a presto!

Redazione ha detto...

Ciao Angrlo,
ti ho inviato un'e-mail.
A presto