DHTML Tabs

TabParams

What Is TabParams?

TabParams is an object literal that defines the behavior of the tabs. You know what an object literal is, right?

What Does TabParams Do?

You change the values of the properties in TabParams to set the behavior of your tabs. For example, if you want to have mouseover tabs, set eventType to "mouseover".

  TabParams = {
    eventType       : "click",
    tabTagName      : "*", 
    imgOverExt      : "o",
    imgActiveExt    : "a",
    cookieScope     : "page"
  };

TabParams Reference Chart

TabParams
eventType What action activates a tab? "click" | "mouseover" | "mousedown" | "mouseup".
tabTagName "span" | "img" | "" | "a"

"" is not as efficient. Use "*" if your have more than one tagName for tabs.

imgOverExt A file name suffix before the extension.

if src="calendar.gif" is the normal file and you want it to be "calendaro.gif" on mouseover, then imgOverExt is "o".

imgActiveExt A file name suffix before the extension.

if src="calendar.gif" is the normal file and you want it to be "calendara.gif" in its active state, then imgActiveExt is "a".

cookieScope "page" | "site" | "none"

-- "page"

page scope (default) saves multiple tab states for different tabsystems on your site.

Page scope is useful when you want to save the state of different tabsystems on your site. Page scope uses multiple cookies.

-- "site"

site scope saves the state for tabSystems that may be used on multiple pages (such as with included files.

This is most useful for using the same tabSystem(s) on different pages, as with a server side include file. Site scope uses only 1 cookie.


Image Tabs

If you are using images for tabs, take note.

Tab images are swapped in two states: active and mouseover. The image that swapped is set in the TabParams. You must name your images with an extension for each state, e.g. "pic.gif", "picOver.gif", "picActive.gif".

You would then use:

	
TabParams = {
	...
    imgOverExt : "Over",
    imgActiveExt : "Active", 
    ...
};

Next in this tutorial:

 

*AnimTree
*Tabs
*GlideMenus
*DragLib