TabContainer

Submitted by davidb on Sun, 05/20/2007 - 18:16.

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

Action	Key
Navigate to next tab button	Right or down arrow
Navigate to previous tab button	Left or up arrow
Navigate into page	Tab
Navigate to next page	Ctrl + page down, ctrl + tab (except IE7)
Navigate to previous page	Ctrl + page up
Delete a tab	With 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

Submitted by javier on Wed, 12/05/2007 - 15:02.

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

Submitted by Inventor on Mon, 12/17/2007 - 18:55.

+1 to post javier

still broken in IE

Submitted by Unhindered on Wed, 02/13/2008 - 17:54.

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

Cancel content loading for tabs

Submitted by Antronin on Sun, 01/13/2008 - 19:09.

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

Submitted by prajwala on Fri, 02/22/2008 - 05:20.

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.

Closing a tab

Submitted by piotr.jankowski on Thu, 04/24/2008 - 11:33.

@prajwala
"In my view when close the tab , it should destroy all the widgets defined in the tab."

Or give such a possibility. I think of
<(...) closable="true" clearOnExit="true" (...)>

Sometimes you need only to hide a tab instead of destroying it.

Vertically stacked tabs

Submitted by nilsmagnus on Tue, 05/06/2008 - 08:32.

Is there a way or a hack to stack the tabs vertically, say on the left side of the contentpanes?

Edit: sorry for the post, I should have read the whole api. This is resolved by reading the above documentation.

I have a problem with addChild...

Submitted by Soshin on Tue, 05/20/2008 - 16:03.

How can I do to open a new tab by clicking on a button ?
I had an answer in forums, but I'm in trouble when I must apply this to my code...

Could somebody please help me ?

you can do like this.

Submitted by prajwala on Wed, 05/21/2008 - 05:26.

Suppose you are having tab container like this.

The javascript code to open new tab is like this.

function openNewTab(){
// create new tab
var nt = new dijit.layout.ContentPane({title:'New Tab',
href:'/new_url/'});
var tabContainer = dijit.byId('mainTabContainer');
// add tab to tab container
tabContainer.addChild(nt);
// select the newly created tab
tabContainer.selectChild(nt);
}

wonderfull.... this works,

Submitted by Soshin on Sun, 07/13/2008 - 15:37.

wonderfull.... this works, thanks !

And how could I create a new closable tab ?

EDIT : sorry... I'd rather use my brain !

This is what I need :
function openNewTab(){
// create new tab
var nt = new dijit.layout.ContentPane({title:'New Tab',
href:'/new_url/', closable:'/true/'});
var tabContainer = dijit.byId('mainTabContainer');
// add tab to tab container
tabContainer.addChild(nt);
// select the newly created tab
tabContainer.selectChild(nt);
}

Tooltip

Submitted by MikeyJudd on Wed, 05/21/2008 - 14:50.

Is there a way to show a tooltip or some hovering text (like a span title) when you mouse over a tab?

Image on tabs

Submitted by betz on Tue, 06/03/2008 - 15:35.

You can put an image on the tab using the following code:

The alt and title attributes are displayed when the mouse hovers over the image.

To put the tabs vertically:

Tab container does not work when nested in SplitContainer

Submitted by cicada on Sat, 06/21/2008 - 21:27.

It seems that when I add a TabContainer inside other a SplitContainer
the TabControl does not function or render correctly.
Is there way to fix or work around this?

Example:

This works:

This does NOT work:

Search

The Book of Dojo

TabContainer

Examples

Accessibility

Keyboard