« Blog Home

§ Simple tabbed interface

Simple tabbed interface intended to go to different pages.

Simple tabbed interface.  These links are assumed to go to different pages, so the hrefs would be real urls.  Each page would set the active tab on load.  This came from  a PHP project where various admin pages came up with different GET strings, but this was all included in a header file.

example

admintabs.html:

 


<html>
  <head>
  <title></title>
<script type='text/javascript' src='admintabs.js'></script>
<link rel="stylesheet" href="admintabs.css" type="text/css" />
<script type='text/javascript'>
window.onload = makeDoubleDelegate(window.onload, function(){setActiveAdminTab(0)} );
</script>
  </head>
  <body>
<div id="adminlinks">
<span><a href="javascript:setActiveAdminTab(0)">Admin Home</a></span>
<span><a href="javascript:setActiveAdminTab(1)">Add New Member</a></span>
<span><a href="javascript:setActiveAdminTab(2)">Members</a></span>
<span><a href="javascript:setActiveAdminTab(3)">Jobs</a></span>
<span><a href="javascript:setActiveAdminTab(4)">Categories</a></span>
</div>
  </body>
</html>

 


 

 

admintabs.js:

 


function adminTabClick () {
  var tabas=this.getElementsByTagName("a");
  location.href=tabas[0].href;
}
function setActiveAdminTab(tabnum) {
    var tabsarray = document.getElementById("adminlinks").getElementsByTagName("span");
  for (var i=0; i<tabsarray.length; i++) {
    tabsarray[i].className="";
  }
  tabsarray[tabnum].className="activeadmintab";
}
function adminTabMouseover() {
  if(this.className!="activeadmintab")
    this.className="highlightadmintab";
}
function adminTabMouseout() {
  if(this.className!="activeadmintab")
    this.className="";
}
function addAdminTabMouseEvents() {
  var admindiv=document.getElementById("adminlinks");
  if(admindiv) {
    var tabslist=admindiv.getElementsByTagName("span");
    for(var i=0;i<tabslist.length;i++) {
      tabslist[i].onmouseover=adminTabMouseover;
      tabslist[i].onmouseout=adminTabMouseout;
      tabslist[i].onclick=adminTabClick;
    }
  }
}
function makeDoubleDelegate(function1, function2) {
  return function() {
    if (function1)
      function1();
    if (function2)
      function2();
  }
}
window.onload = makeDoubleDelegate(window.onload, addAdminTabMouseEvents );
 

 

 

admintabs.css:

 


a {
  text-decoration: none;
}

div#adminlinks {
  border-bottom: 3px solid #d0d0d0;
}

div#adminlinks span {
  background-color:#e7e7e7; 
  padding: 5px 15px 0px 15px;
  cursor: pointer;
}

div#adminlinks span.activeadmintab, div#adminlinks span.highlightadmintab {
  background-color:#d0d0d0;
  position: relative;
  top: -2px;
  padding: 5px 15px 2px 15px;
}

div#adminlinks span a {
  color:#000000;
  position: relative;
  top: 1px;
}

 

 

 

last edited on February 16th, 2009 at 1:48 AM

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


“What do you tell them?”
“To be captains of their own fates.”
“Profound.  Who’s going to be the crew?”
John & Claire, Artifact, Gregory Benford