mcUIControls - mcUITabs

Typically, applications use tabs to place a lot of data in a small place.

Should tabs all be the same width, or should they vary based on their content? This library allows the tab widths to vary.

Examples | Usage | Tab Button | Tab Page | Tab Page Container | Multiple Tab Panels | Styles | Two rows of Tabs | Reference


This example shows 2 independent banks (groups) of tabs. The details to create these is covered below.


Place the following in the header of your web page. For each tab set, add Follow the instructions below, and it should simply work.

Tab Button

This is a typical tab button definition (folded to improve readability). When creating a new tab set (tab panel component), I frequently start by making lots of copies of the following template. Note that title and type are initially disabled by placing an 'x' in front of the property names. When I need to shorten the displayed text, I will uncomment the title property and add some text so that when the mouse hovers over the tab, the longer description will be displayed.

If I want to hide a tab, I just uncomment the type property. I normally do this if I want to distribute a "work in process" and not have broken tabs.

Using this technique (ie, including the non-functional properties), I don't have to look up commands for fairly common tasks.

Tab Page

This is the basic tab page format. You may place anything you want inside the div, but make sure it fits in the allocated space.

Each page may support an onDisplay event called (if present) when the tab is clicked. This feature is not compatible with tearoff tabs (where each tab can be displayed in its own independent window).

This event name is case sensitive and must be assigned via code - not in the html tag which converts all property names to lower case.

Tab Page Container

In a typical design, all the tab pages will be of different sizes. As a result, without a fixed size Tab Page Container, the panel size will change as different tabs are selected.

The Tab Page Container is simply a div wrapper with a class of mcUITabPanel and a unique ID (for setting the size). - all the individual tab pages are placed inside it.

Note: The class name - mcUITabPanel - is used to configure the Tab Control and must not be changed.
endclass=mcUITabPanel is just a marker to indicate the end of the tab definitions.

The long strings of asterisks really help when editing.

At the top of the file, you should include a style definition to set the size - both height and width - of the panel (container div). Since there may be multiple tab panels in an application, this style should refer to a unique ID (the style name starts with a pound sign - #).

Multiple Tab Panels

The library is designed to support multiple tab panels - just be sure that each is in it own document element. For the example at the top of this page, the 2 tab panels are contained in separate table td elements.


These are the default styles for a single row of tabs. Additional styles to support multiple rows are described in Multi-Row Issues. The background color was selected to be less blue than the default gray.

The .mcUITabPanel, .mcUIRaisedPanel style is identical in both mcUITools.css and mcUITabs.css.

As discussed above, the individual tab pages are placed inside a fixed size container so that the tab display won't change size each time a different tab is selected.

Two rows of Tabs

Basically, the styles presented above won't work when there is more than one row of tabs - this section provides examples showing what the problem is and the "fix" (actually, more of a work around) provided by the library. All the required styles are included in mcUITabs.css and explained in Multi-Row Issues (this page is already too long). To activate them (to apply the "fix"), simply add the mcUITab_Buttons_Multi class to the tab button's parent container and the tabs will be automatically formatted as shown in the example on the far right below. I am open to suggestions for better colors for the current tab.


This (archived) reference describes another approach - the tabs are table columns (instead of buttons in my example) and use images (gifs) to indicate selected or not.

Author: Robert Clemenzi
URL: http:// / Languages / Javascript / mcUIControls / mcUITabs.html