Class wink.ui.layout.TabContainer

Implement a tab container Create a tab container. You can navigate through the tabs by clicking on the arrows on each side of the tabs or directly by sliding on the tabs To instantiate a tab container, the pages (dom nodes) MUST already be present in the page and each one MUST be defined by a unique id. Use the 'getDomNode' method to add the tab container into the page.Note that the tabs titles MUST be contained in a "a" element which class name is "tc_title"

Defined in: tabcontainer.js

Class Summary
Constructor Attributes	Constructor Name and Description
	wink.ui.layout.TabContainer(properties)

Compatibility
Compatibility list	Supported platforms / browsers
	iOS2, iOS3, iOS4, iOS5, iOS6, Android 1.5, Android 2.1, Android 2.2, Android 2.3, Android 3.0, Android 3.1, Android 4.0, BlackBerry 6, BlackBerry 7, Bada 1.0, Windows Phone 8

Field Summary
Field Attributes	Field Name and Description
	displayArrows Whether te left and right arrows are displayed
	firstSelectedTab The index of the tab to display at the container's startup
	tabs The initial list of tabs of the tab container
	uId Unique identifier

Method Summary

Method Attributes	Method Name and Description
	addTab(item) Add a new tab to the tab container
	getDomNode()
	removeTab(id) Remove a tab
	selectTab(id) Select a tab

Event Summary
Event Attributes	Event Name and Description
	/tabcontainer/events/tabselected A Tab is selected

Class Detail

wink.ui.layout.TabContainer(properties)

var properties = 
{
	'tabs': ['tab1', 'tab2', 'tab3', 'tab4', 'tab5', 'tab6', 'tab7', 'tab8'],
	'firstSelectedTab': 5
}

tabContainer = new wink.ui.layout.TabContainer(properties);
document.body.appendChild(tabContainer.getDomNode());

Parameters:
{object} properties: The properties object
{integer} properties.displayArrows Optional, Default: 1: If set to 0, the right and left arrows won't be displayed
{integer} properties.firstSelectedTab Optional, Default: 0: The index of the tab to display at the container's startup (0 represents the first tab in the container)
{array} properties.tabs: An array containing the ids of the tabs to add into the tab container. The tabs dom nodes MUST be present in the page at instantiation time

See:: Test page; Test page (without arrows); Test page (with history)

Field Detail

{integer} displayArrows

Whether te left and right arrows are displayed

{integer} firstSelectedTab

The index of the tab to display at the container's startup

{array} tabs

The initial list of tabs of the tab container

{integer} uId

Unique identifier

Method Detail

addTab(item)

Add a new tab to the tab container

Parameters:

{object} item

An object containing a contentNode (containing the tab content) and a title
{HTMLElement} getDomNode()

Returns:

{HTMLElement} The DOM node containing the tab container
removeTab(id)

Remove a tab

Parameters:

{string} id

The id of the tab to remove
selectTab(id)

Select a tab

Parameters:

{string} id

The id of the tab to select

Event Detail

/tabcontainer/events/tabselected

A Tab is selected

Parameters:
{object} param: The parameters object
{string} param.id: The id of the current tab

documentation

Search

Classes