Print Friendly

# Class YAHOO.ext.TabPanel

Package: | YAHOO.ext
Class: | TabPanel
Extends: | Observable
Defined In: | TabPanel.js

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');
    }

## Public Properties

Property | Defined By
--- | ---
| bodyEl : YAHOO.ext.Element | TabPanel
The body element that contains TabPaneItem bodies.
| el : YAHOO.ext.Element | TabPanel
The container element for this TabPanel.
| maxTabWidth : Number | TabPanel
The maximum width of a tab (ignored if resizeTabs is not true).
| minTabWidth : Number | TabPanel
The minimum width of a tab (ignored if resizeTabs is not true).
| monitorResize : Boolean | TabPanel
Set this to true to turn on window resizing monitoring (ignored if resizeTabs is not true).
| preferredTabWidth : Number | TabPanel
The preferred (default) width of a tab (ignored if resizeTabs is not true).
| resizeTabs : Boolean | TabPanel
Set this to true to enable dynamic tab resizing.
| tabPosition : String | TabPanel
The position of the tabs. Can be 'top' or 'bottom'

## Public Methods

Method | Defined By
--- | ---
| TabPanel(`String/HTMLElement/Element container`, `Boolean config`) | TabPanel
Create new TabPanel.
| activate(`String/Number id`) : void | TabPanel
Activate a TabPanelItem. The currently active will be deactivated.
| addListener(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`]) : void | Observable
Appends an event handler to this element
| addTab(`String id`, `String text`, [`String content`], [`Boolean closable`]) : YAHOO.ext.TabPanelItem | TabPanel
Creates a new TabPanelItem by looking for an existing element with the provided id - if it's not found it creates one.
| addTabItem(`YAHOO.ext.TabPanelItem item`) : void | TabPanel
Add an existing TabPanelItem.
| autoSizeTabs() : void | TabPanel
Manual call to resize the tabs (if resizeTabs is false this does nothing)
| beginUpdate() : void | TabPanel
Disables tab resizing while tabs are being added (if resizeTabs is false this does nothing)
| delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`]) : Function | Observable
Appends an event handler to this element that is delayed the specified number of milliseconds.
| destroy([`Boolean removeEl`]) : void | TabPanel
Destroys this TabPanel
| disableTab(`String/Number id`) : void | TabPanel
Disable a TabPanelItem. It cannot be the active tab, if it is this call is ignored..
| enableTab(`String/Number id`) : void | TabPanel
Enable a TabPanelItem that is disabled.
| endUpdate() : void | TabPanel
Stops an update and resizes the tabs (if resizeTabs is false this does nothing)
| fireEvent(`String eventName`, `Object... args`) : Boolean | Observable
Fires the specified event with the passed parameters (minus the event name).
| getActiveTab() : YAHOO.ext.TabPanelItem | TabPanel
Get the active TabPanelItem
| getTab(`String/Number id`) : YAHOO.ext.TabPanelItem | TabPanel
Returns the TabPanelItem with the specified id/index
| hideTab(`String/Number id`) : void | TabPanel
Hides the TabPanelItem with the specified id/index
| purgeListeners() : void | Observable
Removes all listeners for this object
| removeListener(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener
| removeTab(`String/Number id`) : void | TabPanel
Remove a TabPanelItem.
| setTabWidth(`Number The`) : void | TabPanel
Resizes all the tabs to the passed width
| syncHeight([`Number targetHeight`]) : void | TabPanel
Updates the tab body element to fit the height of the container element for overflow scrolling
| unhideTab(`String/Number id`) : void | TabPanel
"Unhides" the TabPanelItem with the specified id/index

## Public Events

Event | Defined By
--- | ---
| beforetabchange : (`YAHOO.ext.TabPanel this`, `Object e`, `YAHOO.ext.TabPanelItem tab`) | TabPanel
Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
| tabchange : (`YAHOO.ext.TabPanel this`, `YAHOO.ext.TabPanelItem activePanel`) | TabPanel
Fires when the active tab changes

## Property Details

### bodyEl

`public YAHOO.ext.Element bodyEl`
The body element that contains TabPaneItem bodies.
This property is defined by TabPanel.

### el

`public YAHOO.ext.Element el`
The container element for this TabPanel.
This property is defined by TabPanel.

### maxTabWidth

`public Number maxTabWidth`
The maximum width of a tab (ignored if resizeTabs is not true).
This property is defined by TabPanel.

### minTabWidth

`public Number minTabWidth`
The minimum width of a tab (ignored if resizeTabs is not true).
This property is defined by TabPanel.

### monitorResize

`public Boolean monitorResize`
Set this to true to turn on window resizing monitoring (ignored if resizeTabs is not true).
This property is defined by TabPanel.

### preferredTabWidth

`public Number preferredTabWidth`
The preferred (default) width of a tab (ignored if resizeTabs is not true).
This property is defined by TabPanel.

### resizeTabs

`public Boolean resizeTabs`
Set this to true to enable dynamic tab resizing.
This property is defined by TabPanel.

### tabPosition

`public String tabPosition`
The position of the tabs. Can be 'top' or 'bottom'
This property is defined by TabPanel.

## Constructor Details

### TabPanel

`public function TabPanel(`String/HTMLElement/Element container`, `Boolean config`)`
Create new TabPanel.
Parameters:

- `container` : String/HTMLElement/Element
  The id, DOM element or YAHOO.ext.Element container where this TabPanel is to be rendered.
- `config` : Boolean
  Config object to set any properties for this TabPanel or true to render the tabs on the bottom.

## Method Details

### activate

`public function activate(`String/Number id`)`
Activate a TabPanelItem. The currently active will be deactivated.
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to activate.

Returns:

- `void`

This method is defined by TabPanel.

### addListener

`public function addListener(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`])`
Appends an event handler to this element
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope (this object) for the handler
- `override` : boolean
  (optional) If true, scope becomes the scope

Returns:

- `void`

This method is defined by Observable.

### addTab

`public function addTab(`String id`, `String text`, [`String content`], [`Boolean closable`])`
Creates a new TabPanelItem by looking for an existing element with the provided id - if it's not found it creates one.
Parameters:

- `id` : String
  The id of the div to use or create
- `text` : String
  The text for the tab
- `content` : String
  (optional) Content to put in the TabPanelItem body
- `closable` : Boolean
  (optional) True to create a close icon on the tab

Returns:

- `YAHOO.ext.TabPanelItem`
  The created TabPanelItem

This method is defined by TabPanel.

### addTabItem

`public function addTabItem(`YAHOO.ext.TabPanelItem item`)`
Add an existing TabPanelItem.
Parameters:

- `item` : YAHOO.ext.TabPanelItem
  The TabPanelItem to add

Returns:

- `void`

This method is defined by TabPanel.

### autoSizeTabs

`public function autoSizeTabs()`
Manual call to resize the tabs (if resizeTabs is false this does nothing)
Parameters:

- None.

Returns:

- `void`

This method is defined by TabPanel.

### beginUpdate

`public function beginUpdate()`
Disables tab resizing while tabs are being added (if resizeTabs is false this does nothing)
Parameters:

- None.

Returns:

- `void`

This method is defined by TabPanel.

### delayedListener

`public function delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`])`
Appends an event handler to this element that is delayed the specified number of milliseconds.
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope (this object) for the handler
- `delay` : Number
  (optional) The number of milliseconds to delay

Returns:

- `Function`
  The wrapped function that was created (can be used to remove the listener)

This method is defined by Observable.

### destroy

`public function destroy([`Boolean removeEl`])`
Destroys this TabPanel
Parameters:

- `removeEl` : Boolean
  (optional) True to remove the element from the DOM as well

Returns:

- `void`

This method is defined by TabPanel.

### disableTab

`public function disableTab(`String/Number id`)`
Disable a TabPanelItem. It cannot be the active tab, if it is this call is ignored..
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to disable.

Returns:

- `void`

This method is defined by TabPanel.

### enableTab

`public function enableTab(`String/Number id`)`
Enable a TabPanelItem that is disabled.
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to enable.

Returns:

- `void`

This method is defined by TabPanel.

### endUpdate

`public function endUpdate()`
Stops an update and resizes the tabs (if resizeTabs is false this does nothing)
Parameters:

- None.

Returns:

- `void`

This method is defined by TabPanel.

### fireEvent

`public function fireEvent(`String eventName`, `Object... args`)`
Fires the specified event with the passed parameters (minus the event name).
Parameters:

- `eventName` : String
- `args` : Object...
  Variable number of parameters are passed to handlers

Returns:

- `Boolean`
  returns false if any of the handlers return false otherwise it returns true

This method is defined by Observable.

### getActiveTab

`public function getActiveTab()`
Get the active TabPanelItem
Parameters:

- None.

Returns:

- `YAHOO.ext.TabPanelItem`
  The active TabPanelItem or null if none are active.

This method is defined by TabPanel.

### getTab

`public function getTab(`String/Number id`)`
Returns the TabPanelItem with the specified id/index
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to fetch.

Returns:

- `YAHOO.ext.TabPanelItem`

This method is defined by TabPanel.

### hideTab

`public function hideTab(`String/Number id`)`
Hides the TabPanelItem with the specified id/index
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to hide.

Returns:

- `void`

This method is defined by TabPanel.

### purgeListeners

`public function purgeListeners()`
Removes all listeners for this object
Parameters:

- None.

Returns:

- `void`

This method is defined by Observable.

### removeListener

`public function removeListener(`String eventName`, `Function handler`, [`Object scope`])`
Removes a listener
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The handler to remove
- `scope` : Object
  (optional) The scope (this object) for the handler

Returns:

- `void`

This method is defined by Observable.

### removeTab

`public function removeTab(`String/Number id`)`
Remove a TabPanelItem.
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to remove.

Returns:

- `void`

This method is defined by TabPanel.

### setTabWidth

`public function setTabWidth(`Number The`)`
Resizes all the tabs to the passed width
Parameters:

- `The` : Number
  new width

Returns:

- `void`

This method is defined by TabPanel.

### syncHeight

`public function syncHeight([`Number targetHeight`])`
Updates the tab body element to fit the height of the container element for overflow scrolling
Parameters:

- `targetHeight` : Number
  (optional) Override the starting height from the elements height

Returns:

- `void`

This method is defined by TabPanel.

### unhideTab

`public function unhideTab(`String/Number id`)`
"Unhides" the TabPanelItem with the specified id/index
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to unhide.

Returns:

- `void`

This method is defined by TabPanel.

## Event Details

### beforetabchange

`public event beforetabchange`
Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.TabPanel
- `e` : Object
  Set cancel to true on this object to cancel the tab change
- `tab` : YAHOO.ext.TabPanelItem
  The tab being changed to

This event is defined by TabPanel.

### tabchange

`public event tabchange`
Fires when the active tab changes
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.TabPanel
- `activePanel` : YAHOO.ext.TabPanelItem
  The new active tab

This event is defined by TabPanel.

Copyright © 2006 Jack Slocum. All rights reserved.