mcUIControls mcUITabs

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

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

Tab 1 page contents go here

Tab 2 page contents go here

When the mouse hovers over the tab, a longer description is displayed.

Tabset B 1 page contents go here

This width is narrower than the other panel

Tabset B 2 page contents go here

When the mouse hovers over the tab, a longer description is displayed.

Usage

Place the following in the header of your web page.

<script src="js/mcUITabs.js"  type="text/javascript"></script>
<link  href="js/mcUITabs.css" type="text/css" rel="stylesheet" >

For each tab set, add

A container (normally a div) to hold the tab buttons
As many Tab Buttons as required
One Tab Panel
Inside the Tab Panel, add one Tab Page for each button

Follow the instructions below, and it should simply work.

Tab Button

This is a typical tab button definition (folded to improve readability).

<input type="button" id="tab_unique_name" class="mcUITab_Button" 
  value="This is displayed"
  title="This is an optional long descriptive phrase"
  xtype=hidden
>

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.

<input type="button" id="tab_" class="mcUITab_Button" value=""
   xtitle=""  xtype=hidden >

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.

<div id=tab_xx_page >
Tab page contents go here

</div id=end_tab_xx_page>
<!-- ****************************************************************************** -->

Tab pages are wrapped in div tags
The page ID is the same as the associated tab button ID plus "_page"
The ending div ID is the same as the starting div preceded by "end_" - this is just to help debug
After the closing div, I add a comment line of asterisks so that it is easier to edit the code

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).

tab_page.onDisplay = someFunction;

function someFunction(tab_button.id) {}

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.

<div class=mcUITabPanel id=mcUITabPanelUniqueID>  <div id=tab_name1_page > Tab 1 page contents go here </div id=end_tab_name1_page>  <div id=tab_name2_page > Tab 2 page contents go here <p> When the mouse hovers over the tab, a longer description is displayed. </div id=tab_name2_page>  </div endclass=mcUITabPanel>

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 - #).

#mcUITabPanelUniqueID{
  width :300px;   /* just a default */
  height:100px;
}

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 for a single row of tabs. Additional styles to support multiple rows are described in Multi-Row Issues.

.mcUITab_Buttons {
  word-spacing: -4px;       /* better than float:left */
  height: 20px;             /* button default height */
}

.mcUITab_Button {
  background-color:#f4f1ed; /* lighter than the panel */
  border-bottom-style:none;
}

.mcUITab_Button:hover {
  background-color:#e4e1ce; /* darker than normal */
}

.mcUITab_Button.mcUITab_Button_Active{
  background-color:    #ece9d8; /* same as the panel */
  border-bottom-color: #ece9d8;
  border-bottom-style: solid;
  border-bottom-width: 3px;
  border-left-color:   #fbfbfb;
  border-top-color:    #fbfbfb;
}

.mcUITabPanel, .mcUIRaisedPanel{
  border-style: solid;
  padding: 5px;
  background-color:#ece9d8; /* the default is too blue */
  border-width: 2px;
  border-color: #fbfbfb #aca899 #aca899 #fbfbfb ;
}

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.

#mcUITabPanelUniqueID{
  width :300px;   /* just a default */
  height:100px;
}

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.

The first example shows a singe tab row - I think this looks pretty good
The second example shows the problem - multiple rows of tabs, the second row overlaps the data
The third has the fix - the tab buttons are just regular buttons with special coloring for the selected tab
In all cases, the tab pages have a raised border
Except for the id's, the page widths, and the fix, all 3 examples are the same

These are examples - use the mouse and click the tabs
Wide - Single row	2 rows	2 rows with fix
Tab 1 page contents go here Tab 2 page contents go here Set height so this doesn't happen Tab 3 page contents go here Tab 4 page contents go here	Tab 1 page contents go here Tab 2 page contents go here Set height so this doesn't happen Tab 3 page contents go here Tab 4 page contents go here	Tab 1 page contents go here Tab 2 page contents go here Set height so this doesn't happen Tab 3 page contents go here Tab 4 page contents go here
Looks good Current tab is obvious	Tabs overlap page content	Acceptable

I am open to suggestions for better colors for the current tab.

Reference

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