Login Register

TabContainer

A TabContainer is a container that has multiple panes, but shows only one pane at a time. There are a set of tabs corresponding to each pane, where each tab has the title (aka label) of the pane, and optionally a close button.

Examples

Here's a Grimm set of tabs, indeed.

Once upon a time there was a dear little girl who was loved by every one who looked at her, but most of all by her grandmother, and there was nothing that she would not have given to the child.
Hard by a great forest dwelt a poor wood-cutter with his wife and his two children. The boy was called Hansel and the girl Gretel. He had little to bite and to break, and once when great dearth fell on the land, he could no longer procure even daily bread.
There was once upon a time a hermit who lived in a forest at the foot of a mountain, and passed his time in prayer and good works, and every evening he carried, to the glory of God, two pails of water up the mountain.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TabContainer Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
           dojo.require("dijit.layout.ContentPane");
           dojo.require("dijit.layout.TabContainer");
           dojo.require("dijit.form.Button");
     </script>
</head>
<body class="tundra">
   <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
        style="width:500px;height:100px">

      <div id="LittleRed" dojoType="dijit.layout.ContentPane" title="Little Red Cap">
      Once upon a time there was a dear little girl who was loved by
      every one who looked at her, but most of all by her grandmother,
      and there was nothing that she would not have given to the child.
      </div>
      <div id="HanselGretel" dojoType="dijit.layout.ContentPane"
           title="Hansel and Gretel" closable="true" selected="true">

      Hard by a great forest dwelt a poor wood-cutter with his wife
      and his two children. The boy was called Hansel and the girl Gretel.
      He had little to bite and to break, and once when great dearth fell
      on the land, he could no longer procure even daily bread.
      </div>
      <div id="GreenTwigs" dojoType="dijit.layout.ContentPane"
             title="The Three Green Twigs">

      There was once upon a time a hermit who lived in a forest at the foot
      of a mountain, and passed his time in prayer and good works,
      and every evening he carried, to the glory of God, two pails of water
      up the mountain.
      </div>
</div>
</body></html>
dijit.layout.TabContainer
A TabContainer is a container that has multiple panes, but shows only one pane at a time. There are a set of tabs corresponding to each pane, where each tab has the title (aka title) of the pane, and optionally a close button. Publishes topics <widgetId>-addChild, <widgetId>-removeChild, and <widgetId>-selectChild (where <widgetId> is the id of the TabContainer itself.
Attributes
tabPosition String Defines where tabs go relative to tab content. "top", "bottom", "left-h", "right-h" override setting in StackContainer
Methods
addChild(/*Widget*/ child, /*Integer?*/ insertIndex) Process the given child widget, inserting its dom node as a child of our dom node
back() New for 1.0Select previous page.
closeChild(/*Widget*/ page) Close the given widget, like clicking the X button
forward() New for 1.0Select next page.
Widget[] getChildren() returns array of children widgets
Widget getNextSibling() returns the widget "to the right"
Widget getParent() returns the parent widget of this widget, assuming the parent implements dijit._Container
Widget getPreviousSibling() returns the widget "to the left"
Boolean hasChildren() true if this widget has child widgets
removeChild(/*Widget*/ page) removes the passed widget instance from this widget but does not destroy it
resize(/* Object */ args) Explicitly set this widget size (in pixels), and then call layout() to resize contents (and maybe adjust child widgets). Args is of form {w: int, h: int, l: int, t: int}.
selectChild(/*Widget*/ page) Show the given widget (which must be one of my children)

Accessibility

Keyboard

ActionKey
Navigate to next tab buttonRight or down arrow
Navigate to previous tab buttonLeft or up arrow
Navigate into pageTab
Navigate to next pageCtrl + page down, ctrl + tab (except IE7)
Navigate to previous pageCtrl + page up
Delete a tabWith focus on the tab title of the tab to delete, press Delete or ctrl + w. Note that the tab must have been created with deletion enabled via the closable attribute. For the 1.1 release, pressing shift-F10 with focus on the tab title or right mouse clicking on the tab title will bring up a context menu with the option to Close the tab. This provides a mechanism to determine if the tab is closable.

This page on IE

This page doesn't work on IE, it make the explorer get an error (can't even debug it) and then it goes to an empty page.

+1 to post javier

+1 to post javier

still broken in IE

This page is still broken in IE, but the sample code on its own does work in IE.

Cancel content loading for tabs

I would like to recommend to add feature for tabContainer of canceling content loading when selected tab is changed.
I'm using refreshOnShow="true" for tabs and it would be a good thing to have. It can be achieve by listening to the <widgetId>-selectChild topic and telling the previous tab to cancel the content load if it is not already loaded, but this should be a standard behavior in my opinion. (to save bandwith, etc.)
--
NP

tab close event not destroying decendent widgets

Tab close is not destroying the widgets defined inside the tab. So When I try to open tab again it is giving "Tried to register widget with id== dialogBox but that id is already registered" error. Here dialogBox is the widgetId that I am using inside the tab.

When close the tab why it is not destroying all widgets defined inside the tab. To destroy those inner widgets I have to attach event for onclose and need to destroy manually. I don't know whether it is a bug or it does not support this feature. In my view when close the tab , it should destroy all the widgets defined in the tab.