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 | Tab
The class name applied to active tabs.
| DISABLED_CLASSNAME : String | Tab
The class name applied to disabled tabs.
| DOM_EVENTS : Object | Element
Dom events supported by the Element instance.
| LABEL_INNER_TAGNAME : String | Tab
The default tag name for a Tab's inner element.
| LOADING_CLASSNAME : String | Tab
The class name applied to dynamic tabs while loading.
| 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.

## Public Methods

Method | Defined By
--- | ---
| Tab([`element {HTMLElement/String}`], `Object properties`) | Tab
| 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...
| appendChild(`Boolean deep`) : void | Element
Wrapper for HTMLElement method.
| appendTo(`HTMLElement/Element parentNode`, `HTMLElement/Element before`) : void | Element
Appends the HTMLElement into either the supplied parentNode.
| 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.
| 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
| 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 tab.

## Public Events

Event | Defined By
--- | ---
| activeChange : () | Tab
Fires after the active state is changed. See: Element.addListener Event fields: <String> type activeChange <...
| 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...
| 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...
| contentChange : () | Tab
Fires after the tab content is changed. See: Element.addListener Event fields: <String> type contentChange <...
| contentReady : () | Element
Fires when the Element's HTMLElement subtree is rendered. See: Element.addListener Event fields: <String> type ...
| labelChange : () | Tab
Fires after the tab label is changed. See: Element.addListener Event fields: <String> type labelChange <Stri...

## Property Details

### ACTIVE_CLASSNAME

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

### DISABLED_CLASSNAME

`public String 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 LABEL_INNER_TAGNAME`
The default tag name for a Tab's inner element.
This property is defined by Tab.

### LOADING_CLASSNAME

`public String LOADING_CLASSNAME`
The class name applied to dynamic tabs while loading.
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.

## Constructor Details

### Tab

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

- `{HTMLElement/String}` : element
  (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

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

### 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/Element parentNode`, `HTMLElement/Element before`)`
Appends the HTMLElement into either the supplied parentNode.
Parameters:

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

Returns:

- `void`

This method is defined by Element.

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

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

### 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 tab.
Parameters:

- None.

Returns:

- `String`

This method is defined by Tab.

## Event Details

### activeChange

`public event activeChange`
Fires after the active state is changed.

See: Element.addListener

Event fields:
`<String> type` activeChange
`<Boolean> prevValue` the previous value
`<Boolean> newValue` the updated value

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

Subscribers will be called with the following parameters:

- None.

This event is defined by Tab.

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

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

### contentChange

`public event contentChange`
Fires after the tab content is changed.

See: Element.addListener

Event fields:
`<String> type` contentChange
`<String> prevValue` the previous value
`<Boolean> newValue` the updated value

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

Subscribers will be called with the following parameters:

- None.

This event is defined by Tab.

### contentReady

`public event contentReady`
Fires when the Element's HTMLElement subtree is rendered.

See: Element.addListener

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

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

Subscribers will be called with the following parameters:

- None.

This event is defined by Element.

### labelChange

`public event labelChange`
Fires after the tab label is changed.

See: Element.addListener

Event fields:
`<String> type` labelChange
`<String> prevValue` the previous value
`<String> newValue` the updated value

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

Subscribers will be called with the following parameters:

- None.

This event is defined by Tab.

Copyright © 2006 Jack Slocum. All rights reserved.