65.9K
CodeProject is changing. Read more.
Home

DHTML Web Tab Control

Steve Puri
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.88/5 (22 votes)

Sep 19, 2003

4 min read

viewsIcon

277555

downloadIcon

4708

A simple client-side dynamic web tab control.

Sample screenshot

Introduction

This article describes how to implement a simple client-side web tab control using HTML, JavaScript and CSS. The web tab control is highly configurable, allowing content to be specified from local or remote sources, specifying a default selected tab upon loading the page and customizing the look & feel of it.

Design

Essentially, the web tab control is composed of HTML buttons for the tabs and an <IFRAME> for the main content area:

Design

The HTML button tabs and <IFRAME> main content area are separated into two <DIV> container objects so that, upon resizing the browser window, the web tab control maintains structure, avoiding overlapping that may possibly be caused by positioning attributes.

Configuration

The tabs and their respective local/remote content sources are specified in an array; each string item in the array represents a tab and details of it separated by a “|” pipe character. Note that each string item is followed by a “,” comma, except the last item:

var tabs = new Array
(
    "MSDN|http://msdn.microsoft.com",
    "CNN|http://www.cnn.com",
    "NASA|http://www.nasa.gov",  
    "Google|http://www.google.com|*",
    "Forbes|http://www.forbes.com"
);

In general, each tab item in the array of tab string items, follows this template:

“Tab-text | URI | [*]”
  • Tab-text: This is the first part of each item which represents the text that appears on a tab.
  • URI: This is the second part after the first “|” pipe character and is the tab’s respective URI content source.

Optionally, a second “|” pipe character followed by a “*” wildcard character after specifying the URI will make that specific tab, a default selected tab when the page loads:

"Google|http://www.google.com|*"

Finally, the <DIV> container objects are declared in the body of the web page:

<DIV ID="divTabButtons"></DIV>
<DIV ID="divTabFrame"></DIV>

…and the web tab control initialized via calling the tabLoad method:

<BODY onLoad="tabLoad()">

Look & Feel

The look & feel of the web tab control is adjusted entirely through the use of CSS. The <IFRAME> main tab content area design is specified by the .tabFrame style:

.tabFrame
{
    ORDER: 0;
    HEIGHT: 90%;
    WIDTH: 100%;
    BORDER-TOP: #93BEE2 9PX SOLID;
    BORDER-BOTTOM: #93BEE2 9PX SOLID;
    BORDER-LEFT: #93BEE2 9PX SOLID;
    BORDER-RIGHT: #93BEE2 9PX SOLID;
    SCROLLBAR-FACE-COLOR:#6699CC;
    SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;
    SCROLLBAR-SHADOW-COLOR:#6699CC;
    SCROLLBAR-ARROW-COLOR:#FFFFFF;
    SCROLLBAR-DARKSHADOW-COLOR:#6699CC;
}

In its default unselected state, a tab button’s design is defined by the .tabOff style:

.tabOff
{
    FONT-FAMILY: Verdana;
    FONT-SIZE: 11;   
    FONT-WEIGHT: 700;
    TEXT-ALIGN: CENTER;  
    COLOR: #003399;
    BACKGROUND-COLOR: #c4e0f0;  
    BORDER-BOTTOM: #c4e0f0 1PX SOLID;
    HEIGHT: 25;
    CURSOR: HAND;

}

When a tab button is clicked (tab selected), its design state is defined by the .tabOn style:

.tabOn
{    
    FONT-FAMILY: Verdana;
    FONT-SIZE: 11;    
    FONT-WEIGHT: 700;
    TEXT-ALIGN: CENTER;
    COLOR: #003399;
    BACKGROUND-COLOR: #93BEE2;
    BORDER-BOTTOM: #93BEE2 1PX SOLID;    
    HEIGHT: 35;
    CURSOR: HAND;
}

The BORDER-TOP color style attribute of the <IFRAME> main tab content area .tabFrame has to be (well, works best) the same as the BORDER-BOTTOM color style attribute of the tab buttons when they are selected, .tabOn. This is so that when the tab button is selected, it will look as part of the <IFRAME> and provide a continuous and consistent look. Apart from changing colors, another difference between the .tabOn and .tabOff styles is the height of the tab button; when selected .tabOn, a tab’s height is increased, yielding it with a look of self-importance.

Align

By means of setting a global tabAlign variable, the tabs can be aligned RIGHT, CENTER or LEFT as illustrated above.

Implementation

The tabLoad method when called, creates and initializes the web tab control. First it aligns the tabs:

HTML += "<P ALIGN="+tabAlign+">";

Then for every element in the array of string items representing information about a tab, it splits the string at each “|” pipe character extracting parts of the string and creates a HTML button with the .tabOff style and assigning them with a unique ID as well as an onClick event handled by a tabOnClick method:

for (var i = 0; i < tabs.length; i++)
{
    var tab = tabs[i].split("|");
    HTML += "<INPUT TYPE='BUTTON' ID="+i+" 
            CLASS='tabOff' VALUE="+tab[0]+" 
            onClick='tabOnClick("+i+")'> ";
}

The tab buttons are then bound to the divTabButtons <DIV> container object:

divTabButtons.innerHTML = HTML;

Finally, the tabLoad method seeks out which array string item (which represents a tab and its respective information) contains a “*” wildcard character by further splitting the string at the next “|” pipe character. If found, it calls the tabOnClick method passing to it, the ID of the corresponding tab button created earlier:

for (var i = 0; i < tabs.length; i++)
{    
    var tab = tabs[i].split("|");
    
    if (tab[2] == "*")
    {
        tabOnClick(i);
        
        break; 
    }
}

The tabOnClick method has a parameter which specifies the ID of a tab button. When called, it first sets all the tab button styles to the default .tabOff style:

var oElement = null;

for (var i = 0; i < tabs.length; i++)
{    
    oElement = document.getElementById(i);
    oElement.className = "tabOff";
}

Then, with the aid of its parameter which represents the ID of a specified tab button, it sets the specified tab button’s style to .tabOn:

oElement = document.getElementById(ID);
oElement.className = "tabOn";

Finally, the tabOnClick button seeks out the relevant URI content information of the specified tab from the array of tabs and setting the <IFRAME> SRC attribute to it for displaying, the <IFRAME> is then bound to the divTabFrame <DIV> container object:

var tab = tabs[ID].split("|");
divTabFrame.innerHTML = "<IFRAME SRC="+tab[1]+ 
         " CLASS='tabFrame'></IFRAME>";

As a finishing touch, just so that the selected tab button doesn’t look so much as a button, the document body is told to steal the focus:

document.body.focus();

Notes

  • Tested only with IE6.