Click here to Skip to main content
Click here to Skip to main content

DHTML Web Tab Control

, 18 Sep 2003
Rate this:
Please Sign up or sign in to vote.
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.

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

Share

About the Author

Steve Puri

United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
GeneralPosition of tab frame PinmemberSarah Riblon6-Aug-09 9:52 
GeneralGood Artical Pinmemberparasaniasandip15-Sep-08 20:33 
GeneralGreat Idea, pointer to FireFox compatible solution PinmemberTayBill27-Jul-07 8:18 
Questionrefreshing within frames Pinmemberhaskillg30-Mar-07 8:47 
GeneralMind Blowing PinmemberJitku15-Oct-06 21:27 
GeneralSTOP RELOADING PinmemberDelver7-Jun-06 8:32 
JokeThe best one! PinmemberBlinZaparaSEtimiImenami19-Feb-06 0:10 
GeneralRe: The best one! PinmemberSteve Puri19-Feb-06 8:37 
GeneralRe: The best one! PinmemberBlinZaparaSEtimiImenami19-Feb-06 23:39 
GeneralJavaScript Pinmembercasimirrex19-Nov-05 6:58 
GeneralMultiple words in title Pinmembergogetsome22-Sep-05 7:32 
GeneralRe: Multiple words in title PinmemberSteve Puri22-Sep-05 8:42 
GeneralRe: Multiple words in title PinmemberBlinZaparaSEtimiImenami19-Feb-06 23:38 
GeneralRe: Multiple words in title Pinmembergogetsome20-Feb-06 2:40 
GeneralSupport for other browsers Pinmemberjaemmer16-Sep-05 3:59 
Questionenhancement? PinmemberAnoopB15-Oct-04 4:42 
AnswerRe: enhancement? PinmemberAnoopB15-Oct-04 7:49 
GeneralRe: enhancement? PinmemberSteve Puri16-Oct-04 9:12 
GeneralRe: enhancement? PinmemberAnoopB18-Oct-04 3:18 
QuestionHow to pass variables between frames Pinmemberkishor kumar11-May-04 18:07 
GeneralUsability PinmemberStephane Rodriguez.19-Sep-03 20:46 
GeneralRe: Usability PinmemberSteve Puri19-Sep-03 22:02 
GeneralRe: Usability PinmemberStephane Rodriguez.20-Sep-03 1:06 
GeneralRe: Usability PinmembertheJazzyBrain15-Jun-04 1:27 
GeneralRe: Usability Pinmemberkishor kumar6-Oct-04 23:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Mobile
Web04 | 2.8.141015.1 | Last Updated 19 Sep 2003
Article Copyright 2003 by Steve Puri
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid