tabManager API

Preface

tabManager doesn't use any global variables or functions. An interference with other JavaScripts on your page is not impossible, but very unlikely.

Examples

Although tabManager is used like any other JS-tool on the web, examples often make it easier to understand what has to be done. They are also often seen as some qick reference.

Example Usage

/*
 * normal instantiation
 * a basePanel already exists and contains other divs to import as tabs
 */
var tm = new tabManager('basePanelID', true);


/*
 * dynamic instantiation
 * a basePanel does not yet exist
 * hence no autoimport of panels within the basePanel can take place, so panel
 * _must_ be added dynamically
 */
var tm = new tabManager();
    tm.addPanel(divObject, 'myTabTitle', ' my Tab');


/*
 * normal instantiation with tabBar below the panels
 * a basePanel already exists and contains other divs to import as tabs
 * tabBar will be added below the panels and stay the last child of basePanel
 */
var tm = new tabManager('basePanelID', true, true);

Working Examples

The main information page and the playground can be seen as live examples of how to use tabManager. Have a closer look at the source code an you will get around almost every functionality tabManager offers.

Functions reference

This API is intended for using tabManager, not for developing it. The following reference excludes private functions and variables. The code is documented inline an should be fairly easy to understand.

addOnSwitchFrom()

Add an eventHandler for the specified tabpanel, which gets executed when switching away from the tabpanel. The old eventHandler will be overwritten.

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel
• (obj) eventHandler
  Function-object to execute on switching away from that tabpanel
  eventHandlers have to return a boolean value!

addOnSwitchTo()

Add an eventHandler for the specified tabpanel, which gets executed when switching to the tabpanel. The old eventHandler will be overwritten.

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel
• (obj) eventHandler
  Function-object to execute on switching to that tabpanel
  eventHandlers have to return a boolean value!

addPanel()

Append a new panel to tabManager. Tab and navigational functionality is created automativally.

Parameters

• (mixed) panel
  DOM-object or element-id of div-element to add
• (string) name optional
  name of the tab-link (may be html, so images can be used!)
  If html is used getTabNames() will return 'Tab <index>'
• (string) title optional
  if set, title-attribute of the tab-link will be set to this value
• (string) accesskey optional
  if set, accesskey-attribute of the tab-link will be set to this value
  It's your job to make sure the same accesskey isn't used twice
• (bool) alreadyAppended optional
  if set to true tabManager will not move or assign this panel to DOM-tree. Defaults to false
  only needed by tabManager's autoimport

Returns

(int) tabID of new tabpanel, or -1 on error.

disablePanel()

Disable the specified tabpanel. Switching to this panel will not be possible what so ever.

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel

enablePanel()

Enable the specified tabpanel. Switching to this panel will be possible again.

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel

getBasePanelElement()

get DOM-object of basePanel

Returns

(obj) DOM-object of the basePanel

getCurrentID()

Determine tabID of the currently active tabpanel.

Returns

(int) tabManager's internal tabpanel ID

getFirstID()

Determine tabID of the first tabpanel.

Returns

(int) tabManager's internal tabpanel ID

getLastID()

Determine tabID of the last tabpanel.

Returns

(int) tabManager's internal tabpanel ID

getNextID()

Determine tabID of the next tabpanel (relative to currently active tabpanel).

Returns

(int) tabManager's internal tabpanel ID

getPanelElement()

get DOM-object of panel-element

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel

Returns

(obj) DOM-object of the panel

getPreviousID()

Determine tabID of the previous tabpanel (relative to currently active tabpanel).

Returns

(int) tabManager's internal tabpanel ID

getTabElement()

get DOM-object of tab-element

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel

Returns

(obj) DOM-object of the tab

getTabIDbyElementID()

Determine the tabManager's internal tabpanel ID of the dom-element with the specified element ID

Parameters

• (string) elemID
  ID of the DOM-element

Returns

(int) tabID, or -1 on failure

getTabNames()

Determine the names of the tabs. Reads the name-attributes of the tabs NOT the innerHTML-attributes!

Returns

(array) tab names (index: tabID, value: tabName)

isDisabled()

Determine if the secified tabpanel is disabled or not

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel

Returns

(bool) true if disabled, false if enabled

movePanel()

Move a tabpanel to another position inside tabManager. Tab is moved to the in DOM-tree correct position, Links and ID are reorganised and updated. Jumps to first tabpanel if the tabpanel to remove is the currently active one. onSwitchTo-eventHandler will be executed after the tabpanel is moved.

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel to be moved
• (int) moveBeforeTabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel to move in front of

Returns

(obj) removed panel, or false on error.

removePanel()

Remove a tabpanel from tabManager. Tab as well as panel will be removed from DOM-tree. Both Objects are destroyed.

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID)

Returns

(obj) removed panel, or false on error.

setBasePanelClassName()

Set className of the basePanel-element

Parameters

• (string) className
  name of the class to set for basePanel

setTabLinkAccesskey()

Set the accesskey of the tab-link of the specified tabpanel

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel
• (string) accesskey
  the accesskey-attribute of the tab-link will be set to this value
  It's your job to make sure the same accesskey isn't used twice

setTabLinkInnerHTML()

Set innerHTML of tab-link

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel
• (string) innerHTML
  html to place inside <a>-tag

setTabLinkTitle()

Set the title of the tab-link of the specified tabpanel

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel
• (string) title
  the title-attribute of the tab-link will be set to this value

setTabName()

Set the name of the specified tabpanel. This will change the name-attribute NOT the innerHTML. See setTabLinkInnerHTML() for information on how to change the visual tabName.

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel
• (string) name
  name of the tab-link
  

switchTo()

Switch to the specified tabpanel. If the tabpanel to switch to is deaktivated, switching stops immediately. Before doing the actual switch the onSwitchFrom- and onSwitchTo-eventHandlers are executed. If one of the eventHandlers returns false, switching stops immediately.

Parameters

• (int) tabID
  tabManager's internal tabpanel ID (not DOM's element ID) of the tabpanel

updateTmLinks()

Scans the contents of every tab for (anchor-)links beginning with #tmTab and adds switchTo()-functionality to the found links. You only need to call this function when you edit the contents of a tab outside tabManager. When adding removing or moving tabs using the tabManager-functions the links are updated automatically.

License

Copyright (c) 2006, Rodney Rehm.
All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

• Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
• Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
• Neither the name of the organisation nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.