Tabs

Tabs

Overview

This document explains how to add a degradable tabbed panel system to your page.

Features

• Can use images or span elements
• You write the HTML and CSS
• User defined TabParams to customize behavior
• Unlimited Nesting of TabSystems
• Cookie persistance of tab state
• Rich API for customizing TabParams of inividual TabSystems and for adding event listeners to tabs and tabSystems
• Degrades to non-supporting browsers

Click tab1 » show content1; Click tab2 » show content2; et c. Tabs are easy and fun to use.

The tabs script has a rich API. API documentation can be found here: (no documentation yet).

Since tabs can be images or spans, there are two demos, one with images, and one without.

Tabs

Compatibility

Tabs

Ingredients

• JavaScript

  AllFiles.zip contains the following files which must be placed in the head or body.
  • global.js: crunched or readable
  • utils.js: crunched or readable
  • cookie.js: crunched or readable
  • viewport.js: crunched or readable
  • tabs.js crunched or readable
• HTML for the tabs div, tabs, and contents (see HTML tab)
• CSS for the tabs div, tabs, and contents (see CSS tab)
• A TabParams object (see TabParams tab)

Tabs

Setting up the HTML

There is a tabs container div with the className tabs. The individual tabs are inside the tabs container.

For each tab, there is a corresponding content div. Content divs are siblings to the tabs container div.

CSS Based Tabs	Image Based Tabs
<div id="tabs"> <span id="tab1" class="tab tabActive" >Overview</span> <span id="tab2" class="tab" >The CSS</span> <span id="tab3" class="tab" >Event Object</span> </div>	<div id="tabs"> <img id="tab1" class="tab tabActive" src="img/discography.gif" hoversrc="img/discographyo.gif" activesrc="img/discographya.gif" width="135" height="28" alt="discography" /> </div>
<!-- begin content 1 --> <div class="content" id="content1"> </div> <!-- begin content 2 --> <div class="content" id="content2"> </div> <!-- begin content 3 --> <div class="content" id="content3"> </div>

Each tab contains the className "tab" and the first tab has the className "tab tabActive".

The id of each tab starts with "tab".

Each content div has a corresponding id to a tab. The id of each content matches the id of it's tab, but replaces "tab" with "content".

Function tabInit() will automatically find a content div that corresponds to a tab. For a tab with the id "tabSomeCategory", you must have a content div with the id of "contentSomeCategory," with matching case and spelling.

Tabs

The CSS

The appearance of an span tab is customized through css. The tabActive class represents a tab that has been selected. This tab will not have a hover. The tabHover class represents an inactive tab that is moused over. It is also possible to use different background-images for .tab .tabActive, and .tabHover, but keep in mind that they will be the same image for each tab.

Cross-browser font-size

  

Use a line-height for the tabs.

The height of an inline-box, such as a span is determined by the line-height. If line-height is not explicitly set, this is taken from the font-size.

Leading is the space above and below the letters and, in a way, acts like a margin for the letters by preventing them from colliding vertically. Half-leading is 1/2 of the leading.

Windows puts the the half-leading on the inside of the line box and reduces the font-size by the half-leading (usu 1px).

Macintosh, on the other hand, puts the half-leading on the outside of the line box. The font-size is not decimated.

To acheive a cross-browser line-height, it is necessary to use an explicit line-height. Doing so will control the height of the line box that the tabs use and will ensure that they do not appear too high or too low in some browsers.

Tabs

Customization with img Tags

If img tags are used, two additional attributes are to be used: activesrc and hoversrc. The activesrc attribute represents the source of the image that is a tab in its active state. The hoversrc is what the tab will look like when it is moused-over.

The activesrc and hoversrc must be unique for each tab, for example:

 
<img id="tab1" class="tab tabActive"
      src="img/tab1.gif"
      hoversrc="img/tab1o.gif"
      activesrc="img/tab1a.gif"
      alt="Products" width="135" height="20" />

<img id="tab2" class="tab"
      src="img/tab2.gif"
      hoversrc="img/tab2o.gif"
      activesrc="img/tab2a.gif"
      alt="Our Guarantee" width="135" height="20" />
 

With img tags, the customization is done in a graphics program such as Adobe Photoshop™. You won't need many of the property-value pairs for the selectors .tab .tabActive, and .tabHover —leaving in some rules (background-color, for example) may cause a problem.

Basic Guidlines for Making Image Tabs

1. All of the tabs should have the same height.
2. The images for activesrc and hoversrc should have the same dimensions (height and width) as the default image (the image in the src attribute).

Note on Validity

   The image tags have a hoversrc and an activesrc. This is not in accordance with any of the w3c dtd's, and is not valid. It is still well-formed markup, though. Since IE and Mozilla do not validate against the DTD, there is harm in doing this.

It is possible to make these attributes valid through modules. Try the w3c's modules tutorial.

Tabs

TabParams

You have to define your own TabParams and put it in your document. TabParams defines the behavior of the tabs.

		
 /** TabParams
 * useClone         - boolean. if true, uses a clone of the tabs beneath the contents.
 * alwaysShowClone  - boolean. if true, the clone will never be hidden.
 * eventType        - string. event to activate a tab. 
 *                  one of: "click" | "mouseover" | "mousedown" | "mouseup".
 * tabTagName       - string. "span" | "img" | "*" use "*" for both span and img tabs.
 */

TabParams = {     
    useClone        : true,
    alwaysShowClone : false,
    eventType       : "click",
    tabTagName      : "span"
};
		

Performance Tips

The following tips will decrease initialization time:

• If you don't need a tabsClone, specify false.
• If you are using only img tabs or only span tabs, specify "img" or "span" for tabTagName.

Tabs

Tab Navigation

switchTabs

switchTabs() allows you to simulate a tab click event. switchTabs calls depressTab, which passes activeTab to the resetTab function.

 	
switchTabs(sTabId, event, bReturn)

Parameters: 
    sTabId  ::   String  -an id of a tab
    event   ::   Object  -event (the word event represents this object)
    bReturn ::   boolean -the return value (true | false).

 	

Since this function is likely to cause an Error, a try catch block is used.

<!-- focus to content2 for browsers that don't support tab system -->
<a 
  href="#content2" 
  onclick="return switchTabs('tab2',event,false)">see Tab 2</a>
  	

If switchTabs is called with a tab id that does not exist in the document (e.g. switchTabs("tab9");), an error is produced but it is caught in a catch block. The tab will not switch.

To cancel the href action, call return switchTabs('tab2, event, false); .
To switch to a tab and not cancel the a tag's href, switchTabs('tab2, event, true); (omitted return statement optional).
To switch to a tab and scroll the window to 0,0, switchTabs('tab2, event); .

Tabs

Navigating Directly to a Tab

Using the window.location.hash String

To bring user focus to an element within any tab, use a hash in the location, just like you normally would. The hash value can be a content div's id or the id of an element within any content. The script will figure out where the element is and switch to the correct tab. The hash feature is part of HTML 2.0, so it degrades to non-supporting browsers well.

		
<a href="http://DHTMLkitchen.com/dhtml/ui/tabs/index.jsp#content4"></a>