§ Better tabbed interface
Tabbed interface using get string to set active tab.
This tabbed interface shows how to use the get string in javascript to set the active tab. Instead of having the pages run javascript to set the active tab, javascript itself can check the get string.
function tabClick () {
var tabas=this.getElementsByTagName("a");
location.href=tabas[0].href;
}
function setActiveTab(tabnum) {
var tabsarray = document.getElementById("tablinks").getElementsByTagName("span");
for (var i=0; i<tabsarray.length; i++) {
tabsarray[i].className="";
}
tabsarray[tabnum].className="activetab";
}
function tabMouseover() {
if(this.className!="activetab")
this.className="highlighttab";
}
function tabMouseout() {
if(this.className!="activetab")
this.className="";
}
function addTabMouseEvents() {
var tabsdiv=document.getElementById("tablinks");
if(tabsdiv) {
var tabslist=tabsdiv.getElementsByTagName("span");
for(var i=0;i<tabslist.length;i++) {
tabslist[i].onmouseover=tabMouseover;
tabslist[i].onmouseout=tabMouseout;
tabslist[i].onclick=tabClick;
}
}
}
function getValue(getName) {
var getString = window.location.search.substring(1);
var getArray = getString.split("&");
var getNameValue;
for(var i=0;i<getArray.length;i++) {
getNameValue = getArray[i].split("=");
if(getNameValue[0]==getName)
return getNameValue[1];
}
return false;
}
function setTabFomGet() {
var getTab = getValue("tab");
if(getTab) {
setActiveTab(getTab);
}
else {
setActiveTab(0);
}
}
function makeDoubleDelegate(function1, function2) {
return function() {
if (function1)
function1();
if (function2)
function2();
}
}
function tabsInit() {
addTabMouseEvents();
setTabFomGet();
}
window.onload = makeDoubleDelegate(window.onload, tabsInit );
<html>
<head>
<title></title>
<script type='text/javascript' src='tabs_get.js'></script>
<link rel="stylesheet" href="tabs_get.css" type="text/css" />
</head>
<body>
<div id="tablinks">
<span><a href="?">Admin Home</a></span>
<span><a href="?tab=1">Add New Member</a></span>
<span><a href="?tab=2">Members</a></span>
<span><a href="?tab=3">Jobs</a></span>
<span><a href="?tab=4">Categories</a></span>
</div>
</body>
</html>
a {
text-decoration: none;
}
div#tablinks {
border-bottom: 3px solid #d0d0d0;
}
div#tablinks span {
background-color:#e7e7e7;
padding: 5px 15px 0px 15px;
cursor: pointer;
}
div#tablinks span.activetab, div#tablinks span.highlighttab {
background-color:#d0d0d0;
position: relative;
top: -2px;
padding: 5px 15px 2px 15px;
}
div#tablinks span a {
color:#000000;
position: relative;
top: 1px;
}
last edited on February 15th, 2009 at 8:50 PM
Categories
Comments
- Slashback on "window.onload via double delegate function" - The makeDoubleDelegate() function is rather simple and straightforward, so I find it quite odd that Chrome can't handle it. I do…
- Joaquin Serra on "window.onload via double delegate function" - Hello, i'm using this function one year but i realized now that in Google chrome doesn't work. Have you got some solution?
- tadd on "Javascript function to add css" - thanks for the post
- Slashback on "window.onload via double delegate function" - The makeDoubleDelegate function just needs to be available, so include it once somewhere in your html file or an included javascript…
- Neil Haskins on "window.onload via double delegate function" - I don't understand exactly how this is to be used; I've just used javascript in a cut and paste manner really. Does the whole code go…
