Gadgets.Tab (v0.9)

From VZ Developer Wiki
Jump to: navigation, search

This documentation is not completed yet and will be extended by more examples in future.

gadgets.Tab

Tab class for gadgets. You create tabs using the TabSet addTab() method. To get Tab objects, use the TabSet getSelectedTab() or getTabs() methods. See also: TabSet

Methods

gadgets.Tab.getCallback

Function getCallback()
Returns
Type Description
Function The callback function of the tab
Description
Returns the callback function that is executed when the tab is selected.

gadgets.Tab.getContentContainer

HTMLElement getContentContainer()
Returns
Type Description
HTMLElement The HTML element of the content container
Description
Returns the HTML element where the tab content is rendered.

gadgets.Tab.getIndex

Number getIndex()
Returns
Type Description
Number The tab's index
Description
Returns the tab's index.

gadgets.Tab.getName

String getName()
Returns
Type Description
String The label of the tab
Description
Returns the label of the tab as a string (may contain HTML).

gadgets.Tab.getNameContainer

HTMLElement getNameContainer()
Returns
Type Description
HTMLElement The HTML element of the tab's label
Description
Returns the HTML element that contains the tab's label.

Examples

This example shows the different ways of adding tabs and filling them with content:

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="Tabs Demo" height="140" scrolling="true" > 
    <Require feature="tabs" /> 
  </ModulePrefs>
  <Content type="html">
  <![CDATA[ 

    <script type="text/javascript">
    // Initialize tabs, designate the tab named "Two" as
    // the tab selected by default.
    var tabs = new gadgets.TabSet('__MODULE_ID__', "Two");
    function init() {
        // Technique #1: Capture the tab's ID when you create it, and use the ID 
        // to add content to the tab's corresponding <div>.        
        var one_Id = tabs.addTab('<div style="color: red; font-weight: bold; background-color:#ccf;">Cool Tab</div>');       
        document.getElementById(one_Id).innerHTML = "Content for tab One.";

        // Technique #2: Create the tab and define a corresponding <div> in the
        // HTML portion of the gadget. Add static content to the <div>.      

        tabs.addTab("Two", {
           contentContainer: document.getElementById("two_id")
        });

        // Technique #3: Create the tab and define a corresponding <div> in the
        // HTML portion of the gadget. Add static content to the <div>.
        // Use a callback function to add dynamic content to the static content.

        tabs.addTab("Three", {
           contentContainer: document.getElementById("three_id"),
           callback: callback
        });

        // Technique #4: Create the tab with a tooltip message. If specified <div>
        // doesn't exist, tabs library creates one.   
        // Invoke callback function.        
        tabs.addTab("Four", {            
           contentContainer: document.getElementById("four_id"),
           callback: callback,            
           tooltip: "I'm special"          
        });
    }

    // Callback that provides content to tabs Three and Four
    function callback(tabId) {
      var p = document.createElement("p");
      // Get selected tab
      var selectedTab = tabs.getSelectedTab();
      p.innerHTML = "This is dynamic content generated in callback for tab " + selectedTab.getName();
      document.getElementById(tabId).appendChild(p);
    }

    // Call init function to initialize and display tabs.
    gadgets.util.registerOnLoadHandler(init);
    </script>

   <div id="two_id" style="display:none">Content for tab Two.</div>
   <div id="three_id" style="display:none">This is static content for tab Three.</div>
  ]]>
  </Content>
</Module>


OpenSocial (v0.9)

gadgets

gadgets.io

gadgets.json

gadgets.Prefs

gadgets.util

gadgets.views

gadgets.flash

gadgets.MiniMessage

gadgets.oauth.Popup

gadgets.rpc

gadgets.skins

gadgets.pubsub

gadgets.Tab

gadgets.TabSet

gadgets.window

gadgets.i18n

opensocial

opensocial.Activity

opensocial.Address

opensocial.Album

opensocial.BodyType

opensocial.Collection

opensocial.CreateActivityPriority

opensocial.DataRequest

opensocial.DataResponse

opensocial.Email

opensocial.Enum

opensocial.Environment

opensocial.EscapeType

opensocial.IdSpec

opensocial.MediaItem

opensocial.Message

opensocial.MessageCollection

opensocial.Name

opensocial.NavigationParameters

opensocial.Organization

opensocial.Permission

opensocial.Person

opensocial.Phone

opensocial.ResponseItem

opensocial.Url

osapi.Request

osapi.BatchRequest

osapi.people

osapi.activities

osapi.appdata

osapi.messages

osapi.http