« Blog Home

§ 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.

example

 


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

Comments

No Comments Here. Add yours below!

Add your comment

Name:
Email: (Will not be displayed - Privacy policy)
Website:
Comments:
  random image I can't read it!
Give me a different one!
Verify Post: Input the text from the image above to verify this post (helps prevent spam)
 

« Blog Home


...he had undergone the adolescent discovery (unique in all history, as it always was) that the world was not precisely as he had been led to believe as a child.
The Disinherited, Steve White