Dojo: The Definitive Guide

TabContainer

As it turns out, a TabContainer is really just a fancier version of a StackContainer—the primary difference is that a TabContainer comes with a snazzy set of tabs that can be used to control which page is displayed at any given time. In fact, the TabContainer inherits from StackContainer and provides only a few additional features that pertain to the list of tabs itself. Example 14-6 illustrates basic usage of the TabContainer.

Example 14-6. Creating a TabContainer in markup

<div dojoType="dijit.layout.TabContainer"
  style="width:225px; height:100px; margin:5px; border:solid 1px;">

    <div dojoType="dijit.layout.ContentPane" title="one">
        One fish...
    </div>
    <div dojoType="dijit.layout.ContentPane" title="two">
        Two fish...
    </div>

    <div dojoType="dijit.layout.ContentPane" title="red"
      closable=
    "true">Red fish...
        <script type="dojo/method" event="onClose" args="evt">
            console.log("Closing", this.title);
            return true; //must return true for close to occur!
        </script>
    </div>

    <div dojoType="dijit.layout.ContentPane" title="blue">
        Blue fish...
    </div>

</div>

Take special note that the tab controls take care of themselves; you simply provide a title attribute to each child of the TabContainer, and the rest is handled with internal automation that you don't have get be directly involved with (and that's the best kind). Additionally, notice that you may provide a closeable tab via the closable attribute, and an optional onClose extension point may perform a custom action when a close does occur. Be careful, though, because if true is not returned from onClose, the tab will not close.

Table 14-7 lists the features that pertain to TabContainer.

Table 14-7. TabContainer API

Name	Type	Comment
title	String	Mixed into _Widget from StackContainer. Used in a child to provide the title for its tab button.
closeable	Boolean	Mixed into _Widget from StackContainer. Used in a child to specify whether a tab should be closeable. When closeable, a small icon appears on the tab that provides a means of closing the tab. false by default.
onClose( )	Function	An extension point mixed into _Widget from StackContainer that provides a uniform way for children to provide an extension point that may be used to augment behavior when closed. Returns true by default.
tabPosition	String	Specifies where the list of tab buttons should appear. Possible values include "top" (the default), "button", "left-h", and "right-h".
<id>-addChild <id>-removeChild <id>-selectChild	dojo.publish topics	This functionality is inherited from StackContainer. The named topics are published when children are added, removed, or selected. <id> refers to the id value of the TabContainer.

Tip

The buttons you see on a tab container are honest to goodness dijit.form.Button buttons; do with them as you will.

Just like with StackContainer, you may lazy load content in a TabContainer via a ContentPane, as long as preload is set to be false.

And now, Example 14-7 shows how to use programmatic creation.

Example 14-7. Programmatically creating a TabContainer

var container = new dijit.layout.TabContainer({
    tabPosition: "left-h",
    style : "width:200px;height:200px;"
}, "foo");

var leftChild = new dijit.layout.ContentPane({title : "tab1"});
leftChild.domNode.innerHTML="tab 1";

var rightChild = new dijit.layout.ContentPane({title : "tab2", closable: true});
rightChild.domNode.innerHTML="tab 2";

container.addChild(leftChild);
container.addChild(rightChild);

container.startup(  );