The TabView control

This control is intended for the creation of tabs, each with its distinct content.

The addTab method, defined by the TabView object, is where you define one tab. It takes two arguments: the first on is the id of the tab (or group of tabs), the second one is an object or array, used for defined or custom options.

Tabs must be added in the order you want them to appear.

tabs.addTab('tabID', object);

object can either be an objet defining the tab, or an array containing any number of secondary tabs, available through a built-in pull-down menu.

Sub-tabs must be added in the order you want them to appear. The first defined tab will be the one to appear when the widget loads.

// one tab
tabs.addTab('firstTab', {text: 'firstTabTitle'} );
 
// one tab with a secondary tab
tabs.addTab('tabGroup', [
  {id: 'secondTab', text: 'secondTabTitle'},
  {id: 'firstSubTab', text: 'firstSubTabTitle'}
  ]);

Each can use the following defined settings:

You can also define any custom value, for later retrieval (see sample code):

tabs.addTab('firstTab', 
  {text: 'firstTabTitle', customValue: 'my custom value'} );

The setContent method, also defined by the TabView object, is used to fill-in your tab with content. It takes two arguments: the tab id, and the content (in the form of an HTML string).

tabs.setContent('tabID', '<p>Hey there!</p>');
 
var contentForTheTab = '<p>Hey there!</p>';
tabs.setContent('tabID', contentForTheTab);

Because the content is made of HTML code, you can put just about anything in a tab: text, image, Flash, Google Map, etc…

var TabViewSample = {};
 
widget.onLoad = function() {
  var tabs = new UWA.Controls.TabView();
  TabViewSample.tabs = tabs;
 
  // Create tab items
  tabs.addTab("tab1", {text: "Tab One", customInfo: "custom"});
  tabs.addTab("tab2", {text: "Tab Two"});
  tabs.addTab("tab3", {text: "Tab Three"});
 
  // Put some content in tabs
  tabs.setContent("tab1", "<p>Tab one</p>");
  tabs.setContent("tab2", "<p>Tab two</p>");
  tabs.setContent("tab3", "<p>Tab three</p>");
 
  // Restore saved active tab
  var activeTab = widget.getValue("activeTab");
  if (activeTab) {
    tabs.selectTab(activeTab);
  }
 
  // Register to activeTabChange event
  tabs.observe('activeTabChange', TabViewSample.onActiveTabChanged);
 
  widget.setBody('');
 
  // Append tabview to widget body
  tabs.appendTo(widget.body);
}
 
TabViewSample.onActiveTabChanged = function(name, data) {
  var tabs = TabViewSample.tabs;
 
  var contentHtml = tabs.getTabContent(name).innerHTML;
  contentHtml += '<p>Tab name: '+name+',  event: activeTabChange</p>';
  if (data.customInfo) {
    contentHtml += '<p>customInfo has value: '+ data.customInfo+'</p>';
  }
  tabs.setContent(name, contentHtml);
 
  // Save active tab
  widget.setValue("activeTab", name);
}

See the Rugby World Cup 2007 widget.