Programming Social Applications

Creating a Tab from JavaScript

Another method for creating tab content is to generate it from the JavaScript layer rather than working with HTML markup like we did in the previous example. This approach can be beneficial when your content is generated based on data obtained through an AJAX request to some server-side logic, or when JavaScript logic is required.

Using our base tab gadget, we’ll edit the Content section to build tabs using JavaScript logic:

<Content view="canvas">
   <![CDATA[
      <div id="tabObject"></div>

      <script type="text/javascript">
      //callback to be executed when tab is selected
      function runCallback(tabID){
         var selectedTab = document.getElementById(tabID);
         selectedTab.style.color = "#da1d1d";
      }

      //create a new tabset object
      var tabs = new gadgets.TabSet();

      //create new tabs
      var tab = tabs.addTab("My Tab ", {
         callback: runCallback,
         contentContainer: document.getElementById("tabObject"),
         tooltip: "Select this tab for more details"
      });
      tabs.addTab("Content Tab");

      //alter the content of the tab
      var tabContent = "<b>My New Tab</b>";
      document.getElementBy(tab).innerHTML = tab1Content;
      </script>
   ]]>
</Content>

Note

The full code for this sample is available at https://github.com/jcleblanc/programming-social-applications/blob/master/chapter_4/creating_tabs_from_javascript.xml.

In this example, we start by creating a div node, which will house one of our tabs. In the script block, we initialize a new TabSet object. Following this, we create two tabs.

With the first tab, we capture ...