Hi there!
First script to release!
Today I was working on a simple solution for a tab switcher, I found many ways of doing it, but many of them required jQuery or another and why the heck I want all that big script if I just want a tab switcher.
Guess what? I better do it myself 😛
The thing is that this is the first script that I release here, normally I would try to follow this schema for each script.
Script Name: jsTabs
Version: 0.1
License: GPL v3
Screenshot:
Installation
Just download the .zip file , uncompress and try 😉
Support: Use the forum please 😉
Usage
The main function is ShowTab(id)
function ShowTab(id){
//hidding the boxes
var eBox = getElementsByClass("box",document.getElementById('box_container'),"div");//all the boxes
for (i in eBox) hide(eBox[i].id);
//show the box
show('box'+id);
//change tab class
var eTab = getElementsByClass("tab_selected",document.getElementById('tab_container'),"span");//all the tabs
for (i in eTab) eTab[i].className ='tab';
//set on the tab
document.getElementById('tab'+id).className ='tab_selected';
}
The event to call this function can be onclick, onmouseover or any other you want.
Example:
Tab 1
Tab 2
box1
box2
How works
The script uses a really simple css for colours and positioning.
.tab {
background-color:#999999;
color:#FFFFFF;
cursor:pointer;
padding:5px 5px 0 5px;
}
.tab_selected {
background-color:#237BB2;
color:#FFFFFF;
font-weight: bold;
cursor:pointer;
padding:5px 5px 0 5px;
}
.box{
background-color:#237BB2;
color:#FFFFFF;
padding:5px 5px 0 5px;
}
We have 2 elements:
- Tab to throw the event (instead of an span can be any other element)
- Box to display content (instead of a div can be any other element)
The tab call the function ShowTab. This function checks all the box items with a given class and change his class.
Normally this is a heavy load use, but for netscape we have native getElementsByClass. For ie and others we use a function where we can specify a node to check inside and make it faster.
Notes
This script uses the function getElementsByClass originally from dustin diaz
Works on FF 3.5, Chromium, ie6