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 Markup

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

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