Jx.TabSet

Extends: Object

Implements: Options, Events

A TabSet manages a set of Jx.Button.Tab content areas by ensuring that only one of the content areas is visible (i.e. the active tab). TabSet does not manage the actual tabs. The instances of Jx.Button.Tab that are to be managed as a set have to be added to both a TabSet and a Jx.Toolbar. The content areas of the Jx.Button.Tabs are sized to fit the content area that the TabSet is managing.

Example

var tabBar = new Jx.Toolbar('tabBar');
var tabSet = new Jx.TabSet('tabArea');

var tab1 = new Jx.Button.Tab('tab 1', {contentID: 'content1'});
var tab2 = new Jx.Button.Tab('tab 2', {contentID: 'content2'});
var tab3 = new Jx.Button.Tab('tab 3', {contentID: 'content3'});
var tab4 = new Jx.Button.Tab('tab 4', {contentURL: 'test_content.html'});

tabSet.add(t1, t2, t3, t4);
tabBar.add(t1, t2, t3, t4);

Events

tabChange

the current tab has changed

License

This file is licensed under an MIT style license

Summary

Jx.TabSet	Extends: Object
Properties
tabs	{Array} array of tabs that are managed by this tab set
domObj	{HTMLElement} The HTML element that represents this tab set in the DOM.
Constructor
Jx.TabSet	Create a new instance of Jx.TabSet within a specific element of the DOM.
Functions
resizeTabBox	Resize the tab set content area and propogate the changes to each of the tabs managed by the tab set.
add	Add one or more Jx.Button.Tabs to the TabSet.
remove	Remove a tab from this TabSet.
setActiveTab	Set the active tab to the one passed to this method

Properties

tabs

{Array} array of tabs that are managed by this tab set

domObj

{HTMLElement} The HTML element that represents this tab set in the DOM. The content areas of each tab are sized to fill the domObj.

Constructor

Jx.TabSet

Create a new instance of Jx.TabSet within a specific element of the DOM.

Parameters

domObj	{HTMLElement} an element or id of an element to put the content of the tabs into.
options	an options object, only event handlers are supported as options at this time.

Functions

resizeTabBox

resizeTabBox: function()

Resize the tab set content area and propogate the changes to each of the tabs managed by the tab set.

add

add: function()

Add one or more Jx.Button.Tabs to the TabSet.

Parameters

tab	{<Jx.Tab>} an instance of <Jx.Tab> to add to the tab set. More than one tab can be added by passing extra parameters to this method.

remove

remove: function( tab )

Remove a tab from this TabSet. Note that it is the caller’s responsibility to remove the tab from the Jx.Toolbar.

Parameters

tab	{<Jx.Tab>} the tab to remove.

setActiveTab

setActiveTab: function( tab )

Set the active tab to the one passed to this method

Parameters

tab	{Jx.Button.Tab} the tab to make active.