Print Friendly

# Class YAHOO.widget.TabView

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

A widget to control tabbed views.

## Public Properties

Property | Defined By
--- | ---
| CLASSNAME : Object | TabView
The className to add when building from scratch.
| CONTENT_PARENT_CLASSNAME : Object | TabView
The className of the HTMLElement containing the TabView's label elements to look for when building from existing mark...
| DOM_EVENTS : Object | Element
Dom events supported by the Element instance.
| TAB_PARENT_CLASSNAME : Object | TabView
The className of the HTMLElement containing the TabView's tab elements to look for when building from existing markup...

## Public Methods

Method | Defined By
--- | ---
| TabView(`HTMLElement/String/Object el(optional)`, [`Object attr`]) | TabView
| DOMEventHandler(`event e`) : void | TabView
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 | TabView
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/Element parentNode`, `HTMLElement/Element before`) : void | Element
Appends the HTMLElement into either the supplied parentNode.
| contentTransition() : void | TabView
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 | TabView
Returns the Tab instance at the specified index.
| getTabIndex(`YAHOO.widget.Tab tab`) : int | TabView
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 | TabView
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 | TabView
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 | TabView
Provides a readable name for the TabView instance.

## Public Events

Event | Defined By
--- | ---
| activeTabChange : () | TabView
Fires after the activeTab is changed. See: Element.addListener Event fields: <String> type activeTabChange <...
| available : () | Element
Fires when the Element's HTMLElement can be retrieved by Id. See: Element.addListener Event fields: <String> ty...
| beforeActiveTabChange : () | TabView
Fires before the activeTab is changed. See: Element.addListener If handler returns false, the change will be cancelle...
| beforeOrientationChange : () | TabView
Fires before the orientation is changed. See: Element.addListener If handler returns false, the change will be cancel...
| contentReady : () | Element
Fires when the Element's HTMLElement subtree is rendered. See: Element.addListener Event fields: <String> type ...
| orientationChange : () | TabView
Fires after the orientation is changed. See: Element.addListener Event fields: <String> type orientationChange ...

## Property Details

### CLASSNAME

`public Object CLASSNAME`
The className to add when building from scratch.
This property is defined by TabView.

### 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.
This property is defined by TabView.

### DOM_EVENTS

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

### 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.
This property is defined by TabView.

## Constructor Details

### TabView

`public function TabView(`HTMLElement/String/Object el(optional)`, [`Object attr`])`
Parameters:

- `el(optional)` : HTMLElement/String/Object
  The html element that represents the TabView, or the attribute object to use. An element will be created if none provided.
- `attr` : Object
  (optional) A key map of the tabView's initial attributes. Ignored if first arg is attributes object.

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

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

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

### contentTransition

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

- None.

Returns:

- `void`

This method is defined by TabView.

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

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

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

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

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

## Event Details

### activeTabChange

`public event activeTabChange`
Fires after the activeTab is changed.

See: Element.addListener

Event fields:
`<String> type` activeTabChange
`<YAHOO.widget.Tab> prevValue` the formerly active tab
`<YAHOO.widget.Tab> newValue` the new active tab

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

Subscribers will be called with the following parameters:

- None.

This event is defined by TabView.

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

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

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

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

### orientationChange

`public event orientationChange`
Fires after the orientation is changed.

See: Element.addListener

Event fields:
`<String> type` orientationChange
`<String> prevValue` the former orientation
`<String> newValue` the new orientation

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

Subscribers will be called with the following parameters:

- None.

This event is defined by TabView.

Copyright © 2006 Jack Slocum. All rights reserved.