Lo script che presentiamo interesserà particolarmente a chi ha molto materiale da inserire in poco spazio. Sarà possibile, infatti, associare delle tabs (linguette) ad una normale tabella html in modo da poter dividere contenuti tra loro diversi utilizzando però lo stesso spazio nella pagina.
Lo script è perfettamente compatibile con Explorer 5.x e Navigator 6.x; inoltre è abbastanza semplice da configurare e personalizzare.
L'esempio si compone di 2 file:
- esempio.htm
- stylesheet.css
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Prima di tutto impostiamo i css esterni che ci permetteranno di personalizzare alcuni aspetti della tabella:
<style>
.tab_menu
{
font:bold;
background-color:#336699;
border-top:2px solid gold;
border-left:2px solid gold;
width:80;
height:18;
text-align:center;
color:white;
font-size:11px;
font-family:verdana;
}
.tab_panel
{
border:2px solid #006699;
width:300;
height:150;
font-size:10px;
font-family:verdana;
background-color: #f0f0f0;
}
</style>
La prima classe ("tab_menu") andrà modifica per personalizzare la parte superiore della tabella (quella dove sono presenti le varie voci). Sarà possibile cambiare il colore di sfondo, l'altezza e la lunghezza della cella, il tipo di font.
La seconda classe ("tab_panel") riguarda la parte inferiore della tabella, in cui sono contenuti i messaggi. Potremo decidere anche qui la lunghezza e l'altezza della cella, il colore di sfondo etc etc.
A questo punto possiamo inserire la prima parte del javascript tra i tag <head> della pagina:
<script type="text/javascript" language="javascript">
var sel_menu
sel_menu = "";
function set_text(obj,text_var,menu)
{
menu = document.getElementById(menu);
if (menu != sel_menu)
{
obj_panel = document.getElementById(obj);
text_var = eval(text_var);
obj_panel.innerHTML = text_var;
menu.style.backgroundColor = "c6c6c6";
if (sel_menu != "") sel_menu.style.backgroundColor = "006699";
sel_menu = menu;
}
}
</script>
Questo codice non richiede un gran lavoro di personalizzazione. Dovremo solamente decidere i colori che assumeranno le celle sia quando sono selezionate che quando non lo sono.
I valori esadecimali da modificare si trovano in queste due stringhe:
menu.style.backgroundColor = "c6c6c6";
if (sel_menu != "") sel_menu.style.backgroundColor = "006699";
Adesso dobbiamo inserire questo codice nel punto della pagina in cui vorremo far apparire la tabella:
<script type="text/javascript" language="javascript">
var menu = new Array();
menu[0]= new Array("Info Script","var_tab1");
menu[1] = new Array("Domanda","var_tab2");
menu[2] = new Array("Staff","var_tab3");
var_tab1 = "<div align='center'><strong>Questo script è compatibile
con:</strong><font color=red> <li>Internet Explorer<li>Netscape 6.x<br /></font></div>";
var_tab2 = "<div align='center'><strong>Come si chiama il processo
naturale con cui blabla ?</strong><font color='red'>PEEEEEEEE! La fotosintesi clorofilliana! <br />ANDIAMO! TUTTE LE SO! LE SO... TUTTE!
</font></div>";
var_tab3 = "<div align='center'><strong>La recensione di questo
script è stata realizzata da <a href="mailto:lorenzoforti@html.it">Lorenzo "saibal"
Forti</a></strong></div>";
document.write("<table cellspacing=0 cellpadding=0><tr><td
align=left><table cellspacing=0 cellpadding=0 border="0"><tr>");
for(i = 0;i < menu.length;i++)
{
if (i == (menu.length - 1)) document.write("<td onmouseover=''><a
href="JavaScript:set_text('tab_detail','"+ menu[i][1] +"','menu"+i+"')" onmouseout="window.status='';return true"
onmouseover="window.status='"+menu[i][0]+"';return true"><div class='tab_menù style='border-right:2px solid gold' id='menu"+i+"'
style='cursor:hand;'>"+menu[i][0]+"</div></a></td>");
else document.write("<td onmouseover=''><a
href="JavaScript:set_text('tab_detail','"+ menu[i][1] +"','menu"+i+"')"><div class='tab_menù
onmouseout="window.status='';return true" onmouseover="window.status='"+menu[i][0]+"';return true" id='menu"+i+"'
style='cursor:hand;'>"+menu[i][0]+"</div></a></td>");
}
document.write("</tr></table>");
</script>
Vediamo cosa personalizzare
menu[0]= new Array("Info Script","var_tab1");
menu[1] = new Array("Domanda","var_tab2");
menu[2] = new Array("Staff","var_tab3");
Queste stringhe rappresentano le tabs presenti nella tabella (in questo caso tre voci). Dato che le voci sono contenute all'interno dell'array "menu", sarà possibile aggiungerne altre senza limitazioni. Basterà seguire, come sempre, l'ordine progressivo dei numeri tra le parentesi quadrate.
Ogni array deve essere composto da due elementi: la scritta che comparirà sulla linguetta e il nome della variabile in cui inserire il contenuto corrispondente.
Nel caso di questo codice, se volessimo aggiungere una nuova tab, inseriremmo un nuovo array di questo tipo:
menu[3] = new Array("Prova","nome_variabile");
Di conseguenza il contenuto della voce "Prova" andrebbe scritto all'interno della variabile "nome_variabile".
nome_variabile = "contenuto della linguetta PROVA";
var_tab1 = "<div align='center'><strong>Questo script è compatibile con:</strong><font color=red> <li>Internet Explorer<li>Netscape 6.x<br /></font></div>";
var_tab2 = "<div align='center'><strong>Come si chiama il processo naturale con cui blabla ?</strong><font color='red'>PEEEEEEEE! La fotosintesi clorofilliana! <br />ANDIAMO! TUTTE LE SO! LE SO... TUTTE! </font></div>";
var_tab3 = "<div align='center'><strong>La recensione di questo script è stata realizzata da <a href="mailto:lorenzoforti@html.it">Lorenzo "saibal" Forti</a></strong>
</div>";
Come detto poco fa il contenuto di ogni linguetta è inserito all'interno della rispettiva variabile indicata nell'array "menu". È possibile inserire qualsiasi codice html; l'unica accortezza da seguire sarà quella di anteporre un backslash () ai doppi apici (").
Immediatamente dopo il codice appena visto, inseriamo quanto segue:
<div class="tab_panel" id="tab_detail"></div>
<script type="text/javascript"
language="javascript">set_text('tab_detail','var_tab1','menu0');</script>
In particolare la stringa:
<script language="javascript">set_text('tab_detail','var_tab1','menu0');</script>
serve per determinare quale TAB visualizzare per prima, al caricamento della pagina.
Se, ad esempio, volessimo impostare la seconda linguetta come default, dovremmo modificare la stringa in
<script language="javascript">set_text('tab_detail','var_tab2','menu1');</script>
Altre modifiche non sono necessarie.
