When there is too much data for a given page, I sometimes use a tab control.
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.
This is just a simple example with 3 tabs -
the last tab shows additional popup 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
- To follow the guidelines provided below
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.
- The tabs are buttons
- The tab pages are div's
- The naming convention associates the tabs and their pages
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
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.
title="Any additional text"
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.
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_
any html you want goes here
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!!
just to keep it all together.
I wrap the whole thing in
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.
which only reloads the page text but does not run window.onload.
As you can see - this is pretty simple. Enjoy.