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.	TabPanel
	el : YAHOO.ext.Element	TabPanel
	The container element for this TabPanel.	TabPanel
	maxTabWidth : Number	TabPanel
	The maximum width of a tab (ignored if resizeTabs is not true).	TabPanel
	minTabWidth : Number	TabPanel
	The minimum width of a tab (ignored if resizeTabs is not true).	TabPanel
	monitorResize : Boolean	TabPanel
	Set this to true to turn on window resizing monitoring (ignored if resizeTabs is not true).	TabPanel
	preferredTabWidth : Number	TabPanel
	The preferred (default) width of a tab (ignored if resizeTabs is not true).	TabPanel
	resizeTabs : Boolean	TabPanel
	Set this to true to enable dynamic tab resizing.	TabPanel
	tabPosition : String	TabPanel
	The position of the tabs. Can be 'top' or 'bottom'	TabPanel

Public Methods

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

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	TabPanel
	tabchange : (`YAHOO.ext.TabPanel this`, `YAHOO.ext.TabPanelItem activePanel`)	TabPanel
	Fires when the active tab changes	TabPanel

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.