O'Reilly logo

Programming Social Applications by Jonathan LeBlanc

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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>

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required