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();
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);
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);
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();
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();
The getTabs()
method returns
all TabSet
tabs as an array of OpenSocial tab objects:
var allTabs = tabs.getTabs();
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);
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);
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);
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();
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();
To obtain the HTML element that contains the tab content, use the getContentContainer()
method:
var tabContainer = tab.getContentContainer();
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();
3.144.244.250