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 | Reference


Examples

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


Usage

Place the following in the header of your web page. 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 tabbed 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 (including 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.


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=Tab_Pages is just a marker to indicate the end of the tab definitions.

The long strings of asterisks really helps 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.


Styles

These are the default styles. The background color was selected to be less blue than the default gray.

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.


Reference

This (archived) reference describes something with more power.


Author: Robert Clemenzi
URL: http:// mc-computing.com / Languages / Javascript / mcUIControls / mcUITabs.html