DHTML Web Tab Control

Steve Puri

Rate me:

3.88/5 (22 votes)

18 Sep 20034 min read

275.7K

4.7K

A simple client-side dynamic web tab control.

Download demo project - 1.2 Kb

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:

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:

JavaScript

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:

HTML

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

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

HTML

<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:

HTML

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

HTML

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

HTML

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

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:

JavaScript

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:

JavaScript

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:

JavaScript

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:

JavaScript

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:

JavaScript

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:

JavaScript

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:

JavaScript

document.body.focus();

Notes

Tested only with IE6.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Written By

Steve Puri

United Kingdom

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

DHTML Web Tab Control

Introduction

Design

Configuration

Look & Feel

Implementation

Notes

License

Comments and Discussions

Details

Search

Help