One method for defining a tab’s content is to create a tab out of an existing HTML DOM node, such as a div. This is an excellent tab method to use if you are trying to promote Model-View-Controller (MVC) design patterns, which separate markup from programming logic.

Applying what we have learned thus far about the tab creation methods in a gadget XML spec, we can build out a tab using a base HTML node as our foundation:

<Content view="canvas">
   <![CDATA[
      <div id="tab1" style="display:none;">This is the content of Tab 1</div>
      <div id="tab2" style="display:none;">
         <b>Heading for Tab 2</b><br />
         See more details on <a href="http://www.mysite.com">my site</a>.
      </div>

      <script type="text/javascript">
      //create a new tabset object with the default tab set
      var tabs = new gadgets.TabSet(__MODULE_ID__, "Second Tab");

      //create two tabs out of our markup
      tabs.addTab("First Tab ", "tab1");
      tabs.addTab("Second Tab", "tab2");
      </script>
   ]]>
</Content>

In this example, we create two tabs, one with just plain text and another with additional HTML markup within the div node. To prevent a jarring UI switch, we set the display for both tabs to none to hide them until they’re built.

Within the script block, we create a new TabSet object with the module ID as the first parameter and the name of the default tab as the second parameter. This optional second parameter specifies which tab loads first by default. Finally, we call the addTab(...) method for both new tabs, passing in the tab name as the first parameter and the tab ID as the second parameter. This tab ID is the same ID we used in our div nodes, which ensures that they’re treated as the content of the tab.

This example gives us two tabs using our HTML markup as the content.