tabManager

tabbed-panels made easy!

start
this panel was importet automatically
s

autoimport

This panel has been importet automatically. tabManager will look for a definition (<dd>-element) to get information like name, title and accesskey. Originally i used proprietary attributes for this, but got kinda sick of the tidy-warnings.

import panel

Importing panels which already exist in DOM is no big deal. They are added to tabManager and moved to the right spot in the DOM-tree. You mustn't click the link more than 1 time!

import div-element

add panel dynamically

Autoimport and importing panels already existing in DOM-tree is nice, but we can also add dynamically created panels.

add a new Panel

enable / disable tabs

Tabs can be disabled - there are more reasons to do this, than i can currently think of. After disabling the tabpanel, you will not be able to switch to this tab what so ever.

disable Panel 'events' · enable Panel 'events'

events
what eventHandlers can achieve
e

eventHandlers

for demonstration purposes I added an eventHandler to this tab. If you try to switch away from this tabpanel, you will be prompted for confirmation.

eventHandlers have to return a boolean - always. If true is returned the process of switching to another tab (or the current tab) is continued. If false is returned, switching will stop.

links
an icon links
other way of navigating between tabs
l

navigational-links

tabManager will automatically scan your panels for links pointing to anchors like #tmNext. Those links are then modified to switch to other tabs within the tabManager.

first tab · previous tab · next tab · last tab

tab-quick-links

Since tabpanels can be moved around, this one is a little more tricky. tabManager remembers wich tabID the tabpanel had, when it was added. this initialTabID is then used to ensure everything is linked to the correct tab...

switch to events (using ID) · switch to start (using ID) · switch to moving (using tabName)

moving
i like to move it move it
m

moving tabpanels around

To give you even more control over tabs and their positions, you can move them around. Since you may have played around a bit, the select below is regeneratet when you enter this panel. Once again, this is a handy thing achieved by events.

I like to move it move it!

Select a tabpanel before which you want to move this tabpanel.

 

div element outside tabManager-div

This panel will be importet once you click the link in the tab start.

set name and title

We can change names and titles of tabs.

change tabName · change tabLinkInnerHTML · change tabLink-title




rodneyrehm.de