Simple Tabs
A simple tabbed style interface can reduce the "clutter" that affects some types of pages. Multipage forms for example can be condensed into one without creating a confusingly long page. Related items can be grouped together in "containers" with colour coded demarcation, and the containers "swapped out" on a button click.The simple layout shown on this demo page is for a four tab page.
The code that drives the whole set-up is not especially complicated.
The HTML
HTML Code :: html
Click to switch code view
<div id="tabbox">
<div id="tabbar">
<div class="tab" id="t_one" _
onclick="show(this.id)">One</div>
<div class="tab" id="t_two" _
onclick="show(this.id)">Two</div>
<div class="tab" id="t_three" _
onclick="show(this.id)">Three</div>
<div class="tab" id="t_four" _
onclick="show(this.id)">Four</div>
</div>
<div class="cbox" id="one">This is box one</div>
<div _
class="cbox" id="two">This is box two</div>
<div class="cbox" id="three">This is box _
three</div>
<div class="cbox" id="four">This is box four</div>
</div>
is an overall container, a container for the four tabs and four content holders. The tabs are given an ID that matches the content box it is set for, with a prepend of "t_". This is so the tab ID can be passed to the javascript for processing which content block to action.
CSS Code :: css
Click to switch code view
#tabbox {
position:relative;
width:90%;
height:25em;
}
#tabbar _
{
position:absolute;
width:100%;
height:2.5em;
background-color: #ffffff;
border:solid 1px _
#000000;
border-width:0px 0px 0 1px;
}
.tab _
_
{
float:left;
width:10%;
height:100%;
text-align:center;
line-height:2em;
cursor:pointer;
border:solid 1px #000000;
border-width:1px 1px 0 0px;
}
.cbox {
padding:2.5em 0 1em 0em;
overflow:auto;
visibility:visible;
display:block;
}
#one, #two, #three, #four {
width:100%;
height:100%;
}
#t_one, #one {
background-color: #6699FF;
}
#t_two, #two {
background-color: #66CC00;
}
#t_three, #three {
background-color: #FF9966;
}
#t_four, #four {
background-color: #99FF99;
}
Take note that the content boxes are display:block and visible by default. This is to ensure that javascript disabled but CSS enabled user agent are delivered the content albeit on a long page as the content boxes will stack down the document in their natural flow order.
JAVASCRIPT Code ::
Click to switch code view
<script type="text/javascript">
function show(p_oID) {
var objID = _
p_oID.replace("t_","");
hideAll();
document.getElementById(objID).style.visibility = _
"visible";
document.getElementById(objID).style.display = "block";
}
function hideAll() _
{
var cBoxes = getElementsByClassName("cbox");
for (var i=0;i < cBoxes.length; i++) _
{
cBoxes[i].style.visibility = "hidden";
cBoxes[i].style.display = "none";
}
}
function _
getElementsByClassName(classname) {
var a = [];
var re = new RegExp("\b" + classname + _
"\b");
var els = document.getElementsByTagName("div");
for(var i=0;i < els.length; _
i++)
if(re.test(els[i].className))a.push(els[i]);
return _
a;
}
show('one');
</script>
Three javascript functions are needed, one to simulate a pretty useful DOM function that is sadly lacking from all browsers, getElementsByClassName. This very handy method has finally made an appearance in FireFox Ver 3, hopefully other browser creators will follow suit.
The functions are getElementsByClassName(classname), which scans a collection of elements returned by the DOM method getElementsByTagName for elements that have the classname attribute that matches the passed parameter and returns the objects in an array.
hideAll() uses this array to loop through and set the elements style properties to display:none and visibility:hidden. Browsers which have a slow javascript engine (Internet Explorer) will probably get a flash of the elements as they collapse.
show(objID) is the function that displays the correct content box. The ID passed has the prepend stripped off, and then calls hideAll() to hide the current block, before setting the requested content ID to display:block and visibilty:visible.
This article was added by Chris Hirst and was posted on 26 November 2008. Chris has been a member since 09 January 2008 and has written 23 article(s) for modTalk
So long, and thanks for all the fish.
good
07 February 2009 at 07:12
very good code, thank you.
Your email will not be shown
Your Name
Comment Title
Comment Text
Page Tags
No Tags to show