Getting and Setting Information About the TabSet

In the previous examples, we explored a rich layer of customization for building tabs. In addition to this functionality, OpenSocial defines many helper methods for obtaining and setting information about the current TabSet. You can think of a TabSet as a container for one or more tabs, whereas a tab is just a single piece of the whole set. These helper methods enable you to vastly extend your tab functionality.

The examples that follow assume that you have already created this TabSet object:

var tabs = new gadgets.TabSet();

Aligning tabs

Should you need to align the tabs to a different horizontal position on the TabSet, you can use the alignTabs(...) method. The first parameter is the string position (left, right, or center), and the second optional parameter is the numeric offset from that position (in pixels):

tabs.alignTabs("right", 50);

Showing and hiding tabs

The displayTabs() method allows you to show or hide the TabSet tabs. The only parameter is a Boolean that specifies whether you want the tabs displayed (true) or not (false):

tabs.displayTabs(false);

Obtaining the parent container

To obtain the parent container of the TabSet, use the getHeaderContainer() method. This method returns the HTML element containing the TabSet:

var headerContainer = tabs.getHeaderContainer();

Obtaining the currently selected tab

To get the currently selected tab, you can use the getSelectedTab() method. This method returns an OpenSocial tab object, from which you can learn further information about the tab, as described in the upcoming section Getting and setting information about a tab:

var tab = tabs.getSelectedTab();

Obtaining all tabs

The getTabs() method returns all TabSet tabs as an array of OpenSocial tab objects:

var allTabs = tabs.getTabs();

Removing a tab

To programmatically remove a tab from a TabSet, use the removeTab() method. This method accepts one parameter, the numeric tab index of the tab to be removed:

tabs.removeTab(2);

Setting the selected tab

You can use the setSelectedTab() method to programmatically change the currently selected tab. This method accepts one parameter, the numeric tab index of the tab to be selected. When the tab is selected, the callback for it (if defined) will be fired unless the tab was already selected:

tabs.setSelectedTab(1);

Swapping tab positions

Should you want to swap the positions of two tabs, you can use the swapTabs() method. This method takes two parameters, the numeric tab indexes of the two tabs to be swapped. During the swap, the selected tab will not change, and no callback functions will be executed:

tabs.swapTabs(2, 3);

Getting and setting information about a tab

When you have an OpenSocial tab object available, you can run a series of methods against the object to provide additional levels of customization. You can obtain a tab object through the TabSet methods getSelectedTab() or getTabs().

The following examples assume that we have already obtained an OpenSocial tab object:

var tabs = new gadgets.TabSet();
... Build Tabs ...
var tab = tabs.getSelectedTab();

Getting the callback of a tab

Using the getCallback() method, you can obtain a reference to the callback function that’s associated with selecting a tab. You can use this method to execute a callback function programmatically without actually selecting the tab:

var callback = tab.getCallback();

Obtaining the content container

To obtain the HTML element that contains the tab content, use the getContentContainer() method:

var tabContainer = tab.getContentContainer();

Obtaining the tab position

For some of TabSet’s tab manipulation methods, you must pass the numeric tab index for the tab you want to remove or swap. Using the getIndex() method returns the index number of the tab:

var tabIndex = tab.getIndex();

Obtaining the tab name

To obtain a tab name, you can use the getName() method. This method returns a string containing the tab name:

var tabname = tab.getName();

Obtaining the tab label

Using the getNameContainer() method returns the HTML element that contains the tab label:

var labelContainer = tab.getNameContainer();
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.82.154