Class YAHOO.ext.TabPanel

Object
   |
   +--YAHOO.ext.TabPanel

class YAHOO.ext.TabPanel

Creates a lightweight TabPanel component using Yahoo! UI.

Usage:

    // basic tabs 1, built from existing content
    var tabs = new YAHOO.ext.TabPanel('tabs1');
    tabs.addTab('script', "View Script");
    tabs.addTab('markup', "View Markup");
    tabs.activate('script');
    
    // more advanced tabs, built from javascript
    var jtabs = new YAHOO.ext.TabPanel('jtabs');
    jtabs.addTab('jtabs-1', "Normal Tab", "My content was added during construction.");
    
    // set up the UpdateManager
    var tab2 = jtabs.addTab('jtabs-2', "Ajax Tab 1");
    var updater = tab2.getUpdateManager();
    updater.setDefaultUrl('ajax1.htm');
    tab2.onActivate.subscribe(updater.refresh, updater, true);
    
    // Use setUrl for Ajax loading
    var tab3 = jtabs.addTab('jtabs-3', "Ajax Tab 2");
    tab3.setUrl('ajax2.htm', null, true);
    
    // Disabled tab
    var tab4 = jtabs.addTab('tabs1-5', "Disabled Tab", "Can't see me cause I'm disabled");
    tab4.disable();
    
    jtabs.activate('jtabs-1');
}
 

- YAHOO.ext.Element
- YAHOO.ext.UpdateManager
- YAHOO.util.Dom
- YAHOO.util.Event
- YAHOO.util.CustomEvent
- YAHOO.util.DDProxy
- YAHOO.util.Connect (optional)

Field Detail

bodyEl

YAHOO.ext.Element bodyEl

The body element that contains TabPaneItem bodies.

el

YAHOO.ext.Element el

The container element for this TabPanel.

onTabChange

CustomEvent onTabChange

Fires when the active TabPanelItem changes. Uses fireDirect with signature: (TabPanel this, TabPanelItem activedTab).

YAHOO.ext.TabPanel

YAHOO.ext.TabPanel(<String/HTMLElement/Element> container)

Parameters:
container - The id, DOM element or YAHOO.ext.Element container where this TabPanel is to be rendered.

Requires:
- YAHOO.ext.Element
- YAHOO.ext.UpdateManager
- YAHOO.util.Dom
- YAHOO.util.Event
- YAHOO.util.CustomEvent
- YAHOO.util.DDProxy
- YAHOO.util.Connect (optional)

activate

void activate(<String> id)

Activate a TabPanelItem. The currently active will be deactivated.

Parameters:
id - The id of the TabPanelItem to activate.

addTab

YAHOO.ext.TabPanelItem addTab(<String> id, <String> text, <String> content)

Creates a new TabPanelItem by looking for an existing element with the provided id - if it's not found it creates one.

Parameters:
id - The id of the div to use or create
text - The text for the tab
content - (optional) Content to put in the TabPanelItem body

Returns:
The created TabPanelItem

addTabItem

void addTabItem(<YAHOO.ext.TabPanelItem> item)

Add an existing TabPanelItem.

Parameters:
item - The TabPanelItem to add

disableTab

void disableTab(<String> id)

Disable a TabPanelItem. It cannot be the active tab, if it is this call is ignored..

Parameters:
id - The id of the TabPanelItem to disable.

enableTab

void enableTab(<String> id)

Enable a TabPanelItem that is disabled.

Parameters:
id - The id of the TabPanelItem to enable.

getActiveTab

YAHOO.ext.TabPanelItem getActiveTab()

Get the active TabPanelItem

Returns:
The active TabPanelItem or null if none are active.

getTab

YAHOO.ext.TabPanelItem getTab(<String> id)

Returns the TabPanelItem with the specified id

Parameters:
id - The id of the TabPanelItem to fetch.

removeTab

void removeTab(<String> id)

Remove a TabPanelItem.

Parameters:
id - The id of the TabPanelItem to remove.