Tab41
Tab42
Tab43
Tab44
Contents41
Contents42
Contents43
Contents44
A frequent problem in Online Communication is, how to present a bunch of information user-friendly yet impressively. And, after all, it should be easy to implement. A Tabs control is a good way to do that. Here you will see how to do that, from the very basics up to a quite elaborate Tabs control.
One important aspect of Online Communication is not only to give some pieces of information to the users, but also to convey to them your wealth of it. To do that, it would be no good just to write them down one after another: the users would quickly lose the overview. (Your users would feel overwhelmed then: "Well, it was quite a lot of information, but I could not see anything interesting to me personally.")
That's the idea of usability: Whatever the information you have to offer, it's just not useful to your readers to overwhelm them. Find a way to give only a few indications of what you have to offer, and leave it to the readers which parts to select.
If possible, your information should be presented such that your users feel invited to read whatever you've got for them, and to "drill down" to the things most interesting to them. Obviously, it should be easy to "drill down", requiring just one or two mouse clicks.
And, let's not forget: The main part of your effort should be devoted to providing the information itself. There's no point in presenting a tiny piece of information gorgeously. Just because you needed most of your time to lay it out perfectly, leaving only a short time for jotting down what you wanted to tell your readers.
A good tool to achieve that effect is the Tabs tool: All your pieces of information are put together to a handful of categories. Each category makes a "Tab" of its own, similar to the pages in a tab register file in the office. (You will probably have experienced a Tabs control already, in my archive, before you came here.)
As always, let me ask you: Please do spy on the source code! You might sometimes wonder if a demo was really implemented as said or if there was any trick at the bottom of it. To do that, you are explicitly asked to right-click anywhere on your browser and to click "View Source" in the context menu.
Basic Structure
The simplest thing you can do to implement a Tabs control is a series of DIVs like the following:
no demo in NS-browser
Try it yourself: Click on any of the Tabs. The corresponding Contents will be displayed. If there were any other Contents displayed before, it will disappear.
Within the brackets
You can use that to display a mass of information, categorized to the user's discretion. Very user-friendly: The users are not forced to wade through a flood of information that's of little relevance to them at this moment. Only relevant information pops up whenever they are clicking.
Basic Structure - HTML
In this crude Tabs control, each of the tabs was implemented by a floating <DIV>. To make it easily discernible, it was given a border. It's important to make the handler function being called whenever a tab is clicked::
Normally, the DIVs would be arranged automatically one beneath the other. To get a horizontal row of DIVs, each one must be declared as
Similarly, the contents part associated to a tab was implemented as a <DIV> with
Note that the contents DIVs are declared to have STLYE="display:none; " . So they are displayed only while they are active. That's controlled by the handler function:
Basic Structure - Javascript
var actidx=1;
function handleTab(idx)
{
var acttab, actcont,
tab = eval('tab'+idx),
tab1 = eval('tab'+'1'),
cont = eval('cont'+idx),
acttab = eval('cont'+actidx);
acttab.style.display = 'none';
cont.style.display = '';
actidx = idx;
cont.style.pixelTop = tab.offsetTop + tab.offsetHeight;
cont.style.pixelLeft = tab1.offsetLeft;
}
actidx is a global variable holding the index of the currently active Tab and its associated Cont. It must be global because the handler function is activated only when a Tab is clicked. If it was declared locally, it would be initialized again upon the next clicking.
The Cont DIVs have also STYLE="position:absolute" That's needed because they will be positioned by the handler function.
Basic Structure - Initializing
Therefore it's necessary to initialize such a Tabs control by a BODY-attribute, e.g. if you want Cont1 to be displayed first:
In this sample there is deliberately no initializing, to show you what happens if it is forgotten: Usually not very much will happen. It's just user-friendlier to let the user know at first glance that there's a Tabs control on screen. (And, on a second thought you will realize: It gives you a good chance to bring before the readers' eyes that information you want to feature prominently.)
Obviously, that sample is of no practical use whatsoever. It was just meant to show you the basic ideas behind a Tabs control.
Dynamic Styling
First thing to make your Tabs practically usable is, to make them being displayed in a way that the user can easily get an idea which tab is currently active, and which of the other tabs should be clicked now.
An easy solution to that could be, to change the tab styles at runtime: the currently active tab would appear prominently e.g. by a white background, all the inactive tabs could have lightgrey background color (akin to "pushed to the far end").
That's how it was done in the following sample.
Try it yourself: Click on any of the Tabs. The corresponding Contents will be displayed. If there were any other Contents displayed before, they will disappear:
no demo in NS-browser
Dynamic Styling - HTML
In order to make your Tabs practically useful, you will want to assign different styles to them. For example, it might make sense to make the currently active tab standing out visually by a white background color whereas all the other tabs are displayed with a lightgrey background, seemingly "pushed back to the background".
Now you can assign a style simply by declaring an object to be member of a class. E.g. the HTML-code of a DIV could be
It would be easy to implement that statically, e.g. by an inline STYLE="… ". Unfortunately, the 'active tab' is changing whenever the user is clicking a tab. So, for dynamic styling, we need a local "style sheet".
Dynamic Styling - Style Sheet
That takes a somewhat roundabout way of styling. First thing is the declare a local style sheet (e.g. right before the </HEAD> tag of you HTML document). You need to declare two different styles:
<STYLE>
<!--
.Tab { … }
.ActiveTab { … }
-->
</STYLE>
Dynamic Styling - Javascript
In the handler function it's enough to assign a different class name to that object. Then it will be displayed in a different style. In the case of changing the style of a Tabs-control handler this could be:
acttab.className ='Tab'; tab.className ='ActiveTab';
In this coding scheme, 'acttab' is a reference to the currently active tab, 'tab' is a reference to the tab clicked by the user.
Blanking out Line between Tab and Contents
One - seemingly minor - thing spoiling the appearance of your Tabs control is the line between the currently active tab and the associated contents.
In the following sample you can see the difference: Without initialization, that line appears when the Tabs come up on screen. Once you click any tab, it is removed.
Try it yourself: Click any tab in the following sample:
no demo in NS-browser
Blanking out ... - HTML
In your HTML code, provide an empty image with no SRC="…" but just a style background-color:white
Blanking out ... - Style Sheet
If you want to use a predefined style, just code that image as follows:
.Blank { position:absolute; width:1; height:1; z-index:2;
background-color:white}
Blanking out ... - Javascript
In your handler function, dimension that white line accordingly and overlay it right on the line between tab and contents. If tab is a reference to the tab that was clicked by the user, the Javascript code should be:Blanking out ... - Initializing
If you want to have a flawless layout of your Tabs right when it appears on screen for the first time, you need to initialize it. You can do that by an attribute in your <BODY>-tag. Say, you wanted to have Cont1 displayed first:
Individual Modifications
When you take a fancy to Tabs, you will soon want to do some modifications to the layout, beyond the pre-defined style sheet.
Some of the modifications that will be described in the following have been applied in the following sample.
Try it yourself: click any of the following tabs:
no demo in NS-browser
Combined Styles
First thing you can do is to add some inline style declarations to your cont's and tab's, e.g. to have them displayed in different background colors. Well, you can have an inline style declaration, a local style sheet, and an external style sheet at the same time:
or
Note: In order to link an external style sheet to your HTML document, you need a line like the following before the closing </HEAD> tag:
pop-up TITLE
A slight restriction of Tabs is, that the tab labels should be one or a few words at maximum. So, a good idea for better user-friendliness is to provide pop-up titles to each of the tabs. When the user moves the cursor onto a tab and hesitates some ½ second, the title pops up and gives a brief explanation of the contents associated with this tab.
In HTML, this is coded as follows:
Try it yourself: Go back to the sample of this section, move the cursor onto a tab and wait some ½ second!
Featuring Active Tab
One simple thing you could do to feature the currently active tab is - make it standing out graphically! This is very user-friendly: your readers see at first glance which category of contents is on screen currently.
To do that, you just need two additional lines of Javascript in your handler function. (In the following coding scheme acttab is a reference to the old active tab, tab is a reference to the tab that was clicked by the reader.):
For a better layout it will be useful to have an additional style declaration in your .ActiveTab-style:
Nested Tabs
Remember: within the DIV-tags of your Contents
there may be any HTML-code - i.e. also a nested Tabs:
<DIV ID="Contx" … >
<DIV ID="Taby1" … > Taby1 </DIV>
:
<DIV ID="Taby_n" … > Taby_n </DIV>
<DIV ID="Conty1" … > … </DIV>
:
<DIV ID="Conty_n" … > … </DIV>
</DIV>
Don't forget that the major Tabs control must be initialized as well as nested Tabs, for example:
An example of a nested tab you can try yourself in Tab4 of the sample above.