Web Tools
Creating Tabs via a Style Sheet and Javascript

When there is too much data for a given page, I sometimes use a tab control. Since html does not provide tab controls, I had to build one using Javascript. Creating it was a bit of a pain - this page explains how to use it.

This is not the only way to create a tab control - just the method I used.

Example

This is just a simple example with 3 tabs - the last tab shows additional popup text when the mouse hovers over it.

tab_Basic_filters_page

Put any html code you want here.

The width and height of the bounding box are controlled by the Tab_Page style

But it is your responsibility to make sure the contents stay inside the box.

Filters

Each tab page contains whatever you want it to.

tab_Load_Data

The associated tab displays additional text when the mouse hovers over it.

This is one of my applications using this component - GHCN Temperature Plotter

To make this work, you will need

Basically

The tabs are initialized with code similar to the following. In these examples, the buttons are associated with the class Tab_Button. However, you may use any name you want.

CSS

The required style sheet just sets a few basic parameters. Note that all the tab pages must be the same width. In fact, the page width is the only required parameter - the rest are optional - have fun.

Defining the tabs

The first problem is to define the tabs. In this implementation, the tabs are buttons with the class specified via and the code searches for all the buttons with a class of that name - Tab_Button in this case. The extra div's in this section are just for documentation - they are not used in the code. If you want additional text to be displayed when the mouse hovers over a tab, add a title parameter. By default, my template includes where the "x" in front of the parameter name causes it it be ignored - it is a simple way to comment out html parameters. Just remover the "x" and enter useful info - as appropriate.

If you want to hide a tab without deleting it, add a second type parameter with a value of hidden after the button assignment. (The last assignment wins!)

To display a hidden tab, I simply add an "x" to the parameter name so the value won't have any effect. I find this useful when creating pages - I create all the tabs (buttons) that I think I will need, but only show the ones I am currently working on.

Tab_Page

Each Tab_Button is associated with a Tab_Page - a div defined as shown below. The id of the page (of the div) is (must be) the same as that of its associated button with _page added to the end. This allows the code to automatically associate the tab and the page.

The class value can be anything you want - it is associated with the style sheet (to set the width and to draw a line around the border), but is not used by the code.

I add an id parameter to the closing div tag just to help document what I am doing. It is the same as the opening id with end_ added.

I always end (actually, separate) my tab pages with a long line of asterisks - it makes it much easier to see where each tab page starts and ends. Much easier!!

Final comments

I wrap the whole thing in just to keep it all together.

When the page is refreshed, sometimes the buttons don't work correctly. This is not a problem once the page is delivered to a final server, but is a frequent problem when developing new pages - specifically, when adding new tabs. With Firefox, the solution is to use ctrl-F5 to reload the javascript instead of just F5 which only reloads the page text but does not run window.onload.

As you can see - this is pretty simple. Enjoy.

Author: Robert Clemenzi
URL: http:// mc-computing.com / WebTools / Tabs.html