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