Print Friendly

# Class YAHOO.widget.Tab

Package: | YAHOO.widget
Class: | Tab
Extends: | Element
Defined In: | tabview.js

A representation of a Tab's label and content.

## Public Properties

Property | Defined By
--- | ---
| ACTIVE_CLASSNAME : String @default | Tab
The class name applied to active tabs.
| CLASSNAME : Object | Tab
The className to add when building from scratch. @default "navset"
| CONTENT_PARENT_CLASSNAME : Object | Tab
The className of the HTMLElement containing the TabView's label elements to look for when building from existing mark...
| DISABLED_CLASSNAME : String @default | Tab
The class name applied to disabled tabs.
| DOM_EVENTS : Object | Element
Dom events supported by the Element instance.
| LABEL_INNER_TAGNAME : String @default | Tab
The default tag name for a Tab's inner element.
| LOADING_CLASSNAME : String @default | Tab
The class name applied to dynamic tabs while loading.
| TAB_PARENT_CLASSNAME : Object | Tab
The className of the HTMLElement containing the TabView's tab elements to look for when building from existing markup...
| dataConnection : Object | Tab
Provides a reference to the connection request object when data is loaded dynamically.
| loadHandler : object | Tab
Object containing success and failure callbacks for loading data.
| register : YAHOO.widget.Tab | Tab
The tab currently active. @config activeTab

## Public Methods

Method | Defined By
--- | ---
| Tab([`element {HTMLElement`], `Object properties`) | Tab
| DOMEventHandler(`event e`) : void | Tab
Routes childNode events.
| addClass(`String className`) : void | Element
Wrapper for Dom method.
| addListener(`String type`, `Function fn`, `Any obj`, `Object scope`) : void | Element
Adds a listener for the given event. These may be DOM or customEvent listeners. Any event that is fired via fireEve...
| addTab(`YAHOO.widget.Tab tab`, `Integer index`) : void | Tab
Adds a Tab to the TabView instance. If no index is specified, the tab is added to the end of the tab list.
| appendChild(`Boolean deep`) : void | Element
Wrapper for HTMLElement method.
| appendTo(`HTMLElement |`, `HTMLElement |`) : void | Element
Appends the HTMLElement into either the supplied parentNode.
| contentTransition() : void | Tab
The transiton to use when switching between tabs.
| fireQueue() : void | Element
Apply any queued set calls.
| getElementsByClassName(`String className`, [`String tag`]) : Array | Element
Wrapper for Dom method.
| getElementsByTagName(`String tag`) : void | Element
Wrapper for HTMLElement method.
| getStyle(`String property`) : String | Element
Wrapper for Dom method.
| getTab(`Integer index`) : YAHOO.widget.Tab | Tab
Returns the Tab instance at the specified index.
| getTabIndex(`YAHOO.widget.Tab tab`) : int | Tab
Returns the index of given tab.
| hasChildNodes() : Boolean | Element
Wrapper for HTMLElement method.
| hasClass(`String className`) : Boolean | Element
Wrapper for Dom method.
| initAttributes(`Object attr`) : void | Tab
Registers TabView specific properties.
| insertBefore(`HTMLElement element`, `HTMLElement before`) : void | Element
Wrapper for HTMLElement method.
| on(`String type`, `Function fn`, `Any obj`, `Object scope`) : void | Element
Alias for addListener
| removeChild(`HTMLElement child`) : void | Element
Wrapper for HTMLElement method.
| removeClass(`String className`) : void | Element
Wrapper for Dom method.
| removeListener(`String type`, `Function fn`) : void | Element
Remove an event listener
| removeTab(`YAHOO.widget.Tab item`) : void | Tab
Removes the specified Tab from the TabView.
| replaceChild(`HTMLElement newNode`, `HTMLElement oldNode`) : void | Element
Wrapper for HTMLElement method.
| replaceClass(`String oldClassName`, `String newClassName`) : void | Element
Wrapper for Dom method.
| setStyle(`String property`, `String value`) : void | Element
Wrapper for Dom method.
| toString() : String | Tab
Provides a readable name for the TabView instance.

## Public Events

Event | Defined By
--- | ---
| available : () | Element
Fires when the Element's HTMLElement can be retrieved by Id. See: Element.addListener Event fields: <String> ty...
| beforeActiveChange : () | Tab
Fires before the active state is changed. See: Element.addListener If handler returns false, the change will be cance...
| beforeActiveTabChange : () | Tab
Fires before the activeTab is changed. See: Element.addListener If handler returns false, the change will be cancelle...
| beforeContentChange : () | Tab
Fires before the tab content is changed. See: Element.addListener If handler returns false, the change will be cancel...
| beforeLabelChange : () | Tab
Fires before the tab label is changed. See: Element.addListener If handler returns false, the change will be cancelle...
| beforeOrientationChange : () | Tab
Fires before the orientation is changed. See: Element.addListener If handler returns false, the change will be cancel...

## Property Details

### ACTIVE_CLASSNAME

`public String @default ACTIVE_CLASSNAME`
The class name applied to active tabs.
This property is defined by Tab.

### CLASSNAME

`public Object CLASSNAME`
The className to add when building from scratch. @default "navset"
This property is defined by Tab.

### CONTENT_PARENT_CLASSNAME

`public Object CONTENT_PARENT_CLASSNAME`
The className of the HTMLElement containing the TabView's label elements to look for when building from existing markup, or to add when building from scratch. All childNodes of the content container are treated as content elements when building from existing markup. @default "nav-content"
This property is defined by Tab.

### DISABLED_CLASSNAME

`public String @default DISABLED_CLASSNAME`
The class name applied to disabled tabs.
This property is defined by Tab.

### DOM_EVENTS

`public Object DOM_EVENTS`
Dom events supported by the Element instance.
This property is defined by Element.

### LABEL_INNER_TAGNAME

`public String @default LABEL_INNER_TAGNAME`
The default tag name for a Tab's inner element.
This property is defined by Tab.

### LOADING_CLASSNAME

`public String @default LOADING_CLASSNAME`
The class name applied to dynamic tabs while loading.
This property is defined by Tab.

### TAB_PARENT_CLASSNAME

`public Object TAB_PARENT_CLASSNAME`
The className of the HTMLElement containing the TabView's tab elements to look for when building from existing markup, or to add when building from scratch. All childNodes of the tab container are treated as Tabs when building from existing markup. @default "nav"
This property is defined by Tab.

### dataConnection

`public Object dataConnection`
Provides a reference to the connection request object when data is loaded dynamically.
This property is defined by Tab.

### loadHandler

`public object loadHandler`
Object containing success and failure callbacks for loading data.
This property is defined by Tab.

### register

`public YAHOO.widget.Tab register`
The tab currently active. @config activeTab
This property is defined by Tab.

## Constructor Details

### Tab

`public function Tab([`element {HTMLElement`], `Object properties`)`
Parameters:

- `{HTMLElement` : element
  | String} (optional) The html element that represents the TabView. An element will be created if none provided.
- `properties` : Object
  A key map of initial properties

## Method Details

### DOMEventHandler

`public function DOMEventHandler(`event e`)`
Routes childNode events.
Parameters:

- `e` : event
  The Dom event that is being handled.

Returns:

- `void`

This method is defined by Tab.

### addClass

`public function addClass(`String className`)`
Wrapper for Dom method.
Parameters:

- `className` : String
  The className to add

Returns:

- `void`

This method is defined by Element.

### addListener

`public function addListener(`String type`, `Function fn`, `Any obj`, `Object scope`)`
Adds a listener for the given event. These may be DOM or customEvent listeners. Any event that is fired via fireEvent can be listened for. All handlers receive an event object.
Parameters:

- `type` : String
  The name of the event to listen for
- `fn` : Function
  The handler to call when the event fires
- `obj` : Any
  A variable to pass to the handler
- `scope` : Object
  The object to use for the scope of the handler

Returns:

- `void`

This method is defined by Element.

### addTab

`public function addTab(`YAHOO.widget.Tab tab`, `Integer index`)`
Adds a Tab to the TabView instance. If no index is specified, the tab is added to the end of the tab list.
Parameters:

- `tab` : YAHOO.widget.Tab
  A Tab instance to add.
- `index` : Integer
  The position to add the tab.

Returns:

- `void`

This method is defined by Tab.

### appendChild

`public function appendChild(`Boolean deep`)`
Wrapper for HTMLElement method.
Parameters:

- `deep` : Boolean
  Whether or not to do a deep clone

Returns:

- `void`

This method is defined by Element.

### appendTo

`public function appendTo(`HTMLElement |`, `HTMLElement |`)`
Appends the HTMLElement into either the supplied parentNode.
Parameters:

- `|` : HTMLElement
  Element} parentNode The node to append to
- `|` : HTMLElement
  Element} before An optional node to insert before

Returns:

- `void`

This method is defined by Element.

### contentTransition

`public function contentTransition()`
The transiton to use when switching between tabs.
Parameters:

- None.

Returns:

- `void`

This method is defined by Tab.

### fireQueue

`public function fireQueue()`
Apply any queued set calls.
Parameters:

- None.

Returns:

- `void`

This method is defined by Element.

### getElementsByClassName

`public function getElementsByClassName(`String className`, [`String tag`])`
Wrapper for Dom method.
Parameters:

- `className` : String
  The className to collect
- `tag` : String
  (optional) The tag to use in conjunction with class name

Returns:

- `Array`
  Array of HTMLElements

This method is defined by Element.

### getElementsByTagName

`public function getElementsByTagName(`String tag`)`
Wrapper for HTMLElement method.
Parameters:

- `tag` : String
  The tagName to collect

Returns:

- `void`

This method is defined by Element.

### getStyle

`public function getStyle(`String property`)`
Wrapper for Dom method.
Parameters:

- `property` : String
  The style property to retrieve

Returns:

- `String`
  The current value of the property

This method is defined by Element.

### getTab

`public function getTab(`Integer index`)`
Returns the Tab instance at the specified index.
Parameters:

- `index` : Integer
  The position of the Tab.

Returns:

- `YAHOO.widget.Tab`

This method is defined by Tab.

### getTabIndex

`public function getTabIndex(`YAHOO.widget.Tab tab`)`
Returns the index of given tab.
Parameters:

- `tab` : YAHOO.widget.Tab
  The tab whose index will be returned.

Returns:

- `int`

This method is defined by Tab.

### hasChildNodes

`public function hasChildNodes()`
Wrapper for HTMLElement method.
Parameters:

- None.

Returns:

- `Boolean`
  Whether or not the element has childNodes

This method is defined by Element.

### hasClass

`public function hasClass(`String className`)`
Wrapper for Dom method.
Parameters:

- `className` : String
  The className to add

Returns:

- `Boolean`
  Whether or not the element has the class name

This method is defined by Element.

### initAttributes

`public function initAttributes(`Object attr`)`
Registers TabView specific properties.
Parameters:

- `attr` : Object
  Hash of initial attributes

Returns:

- `void`

This method is defined by Tab.

### insertBefore

`public function insertBefore(`HTMLElement element`, `HTMLElement before`)`
Wrapper for HTMLElement method.
Parameters:

- `element` : HTMLElement
  The HTMLElement to insert
- `before` : HTMLElement
  The HTMLElement to insert the element before.

Returns:

- `void`

This method is defined by Element.

### on

`public function on(`String type`, `Function fn`, `Any obj`, `Object scope`)`
Alias for addListener
Parameters:

- `type` : String
  The name of the event to listen for
- `fn` : Function
  The function call when the event fires
- `obj` : Any
  A variable to pass to the handler
- `scope` : Object
  The object to use for the scope of the handler

Returns:

- `void`

This method is defined by Element.

### removeChild

`public function removeChild(`HTMLElement child`)`
Wrapper for HTMLElement method.
Parameters:

- `child` : HTMLElement
  The HTMLElement to remove

Returns:

- `void`

This method is defined by Element.

### removeClass

`public function removeClass(`String className`)`
Wrapper for Dom method.
Parameters:

- `className` : String
  The className to remove

Returns:

- `void`

This method is defined by Element.

### removeListener

`public function removeListener(`String type`, `Function fn`)`
Remove an event listener
Parameters:

- `type` : String
  The name of the event to listen for
- `fn` : Function
  The function call when the event fires

Returns:

- `void`

This method is defined by Element.

### removeTab

`public function removeTab(`YAHOO.widget.Tab item`)`
Removes the specified Tab from the TabView.
Parameters:

- `item` : YAHOO.widget.Tab
  The Tab instance to be removed.

Returns:

- `void`

This method is defined by Tab.

### replaceChild

`public function replaceChild(`HTMLElement newNode`, `HTMLElement oldNode`)`
Wrapper for HTMLElement method.
Parameters:

- `newNode` : HTMLElement
  The HTMLElement to insert
- `oldNode` : HTMLElement
  The HTMLElement to replace

Returns:

- `void`

This method is defined by Element.

### replaceClass

`public function replaceClass(`String oldClassName`, `String newClassName`)`
Wrapper for Dom method.
Parameters:

- `oldClassName` : String
  The className to replace
- `newClassName` : String
  The className to add

Returns:

- `void`

This method is defined by Element.

### setStyle

`public function setStyle(`String property`, `String value`)`
Wrapper for Dom method.
Parameters:

- `property` : String
  The style property to set
- `value` : String
  The value to apply to the style property

Returns:

- `void`

This method is defined by Element.

### toString

`public function toString()`
Provides a readable name for the TabView instance.
Parameters:

- None.

Returns:

- `String`

This method is defined by Tab.

## Event Details

### available

`public event available`
Fires when the Element's HTMLElement can be retrieved by Id.

See: Element.addListener

Event fields:
`<String> type` available
`<HTMLElement> target` the HTMLElement bound to this Element instance

Usage:
`var handler = function(e) {var target = e.target};
myTabs.addListener('available', handler);`

Subscribers will be called with the following parameters:

- None.

This event is defined by Element.

### beforeActiveChange

`public event beforeActiveChange`
Fires before the active state is changed.

See: Element.addListener

If handler returns false, the change will be cancelled, and the value will not be set.

Event fields:
`<String> type` beforeActiveChange
`<Boolean> prevValue` the current value
`<Boolean> newValue` the new value

Usage:
`var handler = function(e) {var previous = e.prevValue};
myTabs.addListener('beforeActiveChange', handler);`

Subscribers will be called with the following parameters:

- None.

This event is defined by Tab.

### beforeActiveTabChange

`public event beforeActiveTabChange`
Fires before the activeTab is changed.

See: Element.addListener

If handler returns false, the change will be cancelled, and the value will not be set.

Event fields:
`<String> type` beforeActiveTabChange
`<YAHOO.widget.Tab> prevValue` the currently active tab
`<YAHOO.widget.Tab> newValue` the tab to be made active

Usage:
`var handler = function(e) {var previous = e.prevValue};
myTabs.addListener('beforeActiveTabChange', handler);`

Subscribers will be called with the following parameters:

- None.

This event is defined by Tab.

### beforeContentChange

`public event beforeContentChange`
Fires before the tab content is changed.

See: Element.addListener

If handler returns false, the change will be cancelled, and the value will not be set.

Event fields:
`<String> type` beforeContentChange
`<String> prevValue` the current value
`<String> newValue` the new value

Usage:
`var handler = function(e) {var previous = e.prevValue};
myTabs.addListener('beforeContentChange', handler);`

Subscribers will be called with the following parameters:

- None.

This event is defined by Tab.

### beforeLabelChange

`public event beforeLabelChange`
Fires before the tab label is changed.

See: Element.addListener

If handler returns false, the change will be cancelled, and the value will not be set.

Event fields:
`<String> type` beforeLabelChange
`<String> prevValue` the current value
`<String> newValue` the new value

Usage:
`var handler = function(e) {var previous = e.prevValue};
myTabs.addListener('beforeLabelChange', handler);`

Subscribers will be called with the following parameters:

- None.

This event is defined by Tab.

### beforeOrientationChange

`public event beforeOrientationChange`
Fires before the orientation is changed.

See: Element.addListener

If handler returns false, the change will be cancelled, and the value will not be set.

Event fields:
`<String> type` beforeOrientationChange
`<String> prevValue` the current orientation
`<String> newValue` the new orientation to be applied

Usage:
`var handler = function(e) {var previous = e.prevValue};
myTabs.addListener('beforeOrientationChange', handler);`

Subscribers will be called with the following parameters:

- None.

This event is defined by Tab.

Copyright © 2006 Jack Slocum. All rights reserved.