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 component
| 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)
| bufferedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number millis`]) : Function | Observable
Appends an event handler to this component that is buffered. If the event is triggered more than once in the specifie...
| delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`]) : Function | Observable
Appends an event handler to this component that is delayed the specified number of milliseconds. This is useful for e...
| 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
| getCount() : Number | TabPanel
Returns the number of tabs
| 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
| on(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`]) : void | Observable
Appends an event handler to this element (shorthand for addListener)
| 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 component
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.

### bufferedListener

`public function bufferedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number millis`])`
Appends an event handler to this component that is buffered. If the event is triggered more than once in the specified time-frame, only the last one actually fires.
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
- `millis` : Number
  (optional) The number of milliseconds to buffer (defaults to 250)

Returns:

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

This method is defined by Observable.

### delayedListener

`public function delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`])`
Appends an event handler to this component that is delayed the specified number of milliseconds. This is useful for events that modify the DOM and need to wait for the browser to catch up.
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 (defaults to 1 millisecond)

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.

### getCount

`public function getCount()`
Returns the number of tabs
Parameters:

- None.

Returns:

- `Number`

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.

### on

`public function on(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`])`
Appends an event handler to this element (shorthand for addListener)
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.

### 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.

yui-ext - Copyright © 2006 Jack Slocum. | Yahoo! UI - Copyright © 2006 Yahoo! Inc.
All rights reserved.