Tabovi na web stranicama

Sve više stranica danas koristi okvire sa tabovima. Ovo je posebno popularno na stranicama koje imaju veliki broj informacija na jednoj stranici. U ovom tutorijalu ćemo i vama pokazati kako napraviti okvir sa tabovima. Za ovaj kod potrebno je znati osnove CSS-a te JavaScript jezik. Pošto svi znamo što su tab-ovi nemamo mnogo teorije za objašnjavati pa krenimo sa kodom. Najprije napišimo JavaScript funkcije koje ćemo koristiti. Ovaj kod stavljamo u head dio.



<script type="text/javascript">

var tabs=3;//Postavite broj tabova


function mouseOverTab(i){
var n=i.substring(i.length-1,i.length);
var tab_body_display=document.getElementById("tab"+n).style.display;
if(tab_body_display=="none"){
document.getElementById(i).style.borderBottomColor="white";
}
}

function mouseOutTab(i){
var n=i.substring(i.length-1,i.length);
var tab_body_display=document.getElementById("tab"+n).style.display;
if(tab_body_display=="none"){
document.getElementById(i).style.borderBottomColor="gray";
}
}

function tabClick(i){

var n=i.substring(i.length-1,i.length);
n *=1;
for(var j=1;j<=tabs;j++){
if(n!=j){
document.getElementById("tab_head"+j).style.backgroundColor="lightgrey";
document.getElementById("tab_head"+j).style.borderBottomColor="gray";
document.getElementById("tab_head"+j).style.cursor="hand";
document.getElementById("tab"+j).style.display="none";
}else{
document.getElementById("tab_head"+j).style.backgroundColor="white";
document.getElementById("tab_head"+j).style.borderBottomColor="white";
document.getElementById("tab_head"+j).style.cursor="default";
document.getElementById("tab"+j).style.display="inline";
}
}

}


</script>


Objasnimo malo gornji kod. Postoje tri stanja tab-ova koja moramo posebno procesirati. Kada miš tek dođe iznad taba poziva se funkcija mouseOverTab(i). Ona jednostavno promijeni boju donjeg ruba taba iznad kojeg se nalazi miš. Tako korisnik zna da može kliknuti na ovaj tab. Ako je miš iznad aktivnog taba onda se neće ništa dogoditi jer je tab već aktivan i klikom na njega se neće ništa promijeniti u prikazu.

Kada maknemo miš izvan taba potrebno je vratiti sve na prijašnje stanje. Tada pozivamo funkciju mouseOutTab(i). Ona promijeni boju donje linije u sivu, tj. vrati sve na početno stanje.

Kada korisnik klikne na određeni tab u tom trenutku poziva funkciju tabClick(i). Ova funkcija mora proći kroz sve tabove te ih bojom označiti kao neaktivne, a onaj tab na koji smo kliknuli obojiti bijelom bojom i promijeniti mu donji rub u bijelu boju. Zbog ove funkcije je važno na početku definirati broj tabova u redu var tabs=3;. Tako će ova funkcija znati koliko tabova treba procesirati.

Sada pogledajmo potreban CSS kod koji također ide u head dio naše stranice.


<style>

.tab_head{
position:absolute;
cursor:hand;
top:5px;
height:25px;
width:90px;
text-align:center;
border:2px solid gray;
background-color:LightGrey;
}

.tab_body{
display:inline;
padding:5px;
position:absolute;
top:28px;
left:10px;
width:100%;
border: 2px solid Gray;
}

</style>



Ovim kodom smo definirali izgled tabova (tab_head) te izgled dijela u kojem ispisujemo sadržaj tabova (tab_body).

Ostaje nam još da u body dijelu napravimo same tabove pomoću div elemenata.




<div style="width:400px;position:relative">



<div id="tab1" class="tab_body" style="display:inline;">
Ovo je tab 1 <br>
</div>

<div id="tab2" class="tab_body" style="display:none;">
Ovo je tab 2 <br>
Ovo je tab 2 <br>
</div>

<div id="tab3" class="tab_body" style="display:none;">
Ovo je tab 3 <br>
Ovo je tab 3 <br>
Ovo je tab 3 <br>
</div>


<div id="tab_head1" class='tab_head'
style="left:10px;border-bottom-color:White;"
onclick="tabClick(this.id);"
onmouseover="mouseOverTab(this.id)"
onmouseout="mouseOutTab(this.id)">
Tab1
</div>

<div id="tab_head2" class='tab_head'
style="left:98px;"
onclick="tabClick(this.id);"
onmouseover="mouseOverTab(this.id)"
onmouseout="mouseOutTab(this.id)">
Tab2
</div>

<div id="tab_head3" class='tab_head'
style="left:186px;"
onclick="tabClick(this.id);"
onmouseover="mouseOverTab(this.id)"
onmouseout="mouseOutTab(this.id)">
Tab3
</div>

<script language="JavaScript">
tabClick('tab_head1');
</script>

</div>




Najprije smo definirali zajednički okvir u kojem ćemo definirati tabove i nazvali ga okvir_tabova. Zatim smo definirali sadržaj tabova. Svaki sadržaj taba ima svoj div i mora imati id tab1, tab2, tab3, tab4 itd.

Na kraju definiramo i same tabove na koje će korisnik kliknuti. Ovdje također morate pripaziti da id div elementa ima vrijednost tab_head1, tab_head2, tab_head3, tab_head4 itd. Osim toga, ovi div elementi nose i akcije koje će pozvati naše funkcije u JavaScript-u. Iz koda vidimo da, kada korisnik dođe mišom iznad div elementa, onmouseover poziva funkciju mouseOverTab(this.id). Kada smo maknuli pokazivač miša izvan div elementa onmouseover poziva funkciju mouseOutTab(this.id) te kada klinemo na div element poziva se funkcija tabClick(this.id). Sam sadržaj div elemenata predstavlja naslov taba.