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.

Broken in Safari also

Submitted by bobobly on Sun, 08/03/2008 - 08:32.

Several others in this section are broken on Safari too.

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

Still brocken in IE

Submitted by kbrady on Thu, 07/31/2008 - 10:24.

I also have the same problem with tab container and IE.
The problem from what I understand is that the dojo script tries to modify the dom structure of the page before that the body is completely loaded. I guess also that the sample on its own does work in IE because the page is then very small and loads quickly. However with a large html (like the one in the API doc) we still have the problem..

Is there any way to fix it?
Thanks a lot

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.

how...

Submitted by nicooo on Tue, 08/12/2008 - 07:58.

but how to show a hidden pane ? i didn't find...

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?

Tooltips on TabContainer

Submitted by joscha on Wed, 07/30/2008 - 13:33.

Tooltips on TabContainer tabs have been postponed to dojo 1.3 (see here: http://trac.dojotoolkit.org/ticket/4393) but what you can do is add HTMl to the content pane titles:

new dijit.layout.ContentPane({
title: ''+title+'',
}, someNode);

regards,
Joscha

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:

Child selection event

Submitted by joscha on Wed, 07/30/2008 - 17:21.

I didn't find this anywhere in the docs:

When you need to invoke a method when a Tab is selected:

dojo.connect(new TabContainer(...),'selectChild',console,'debug');

Be careful: this also gets fired when a user clicks on the same tab twice!

Hide/Show Tabcontainer

Submitted by Toniez on Wed, 10/01/2008 - 17:17.

I am embedding a TabContainer in my JSP, and I have it hidden by default using style="display: none". However, when I try to programmatically change the style display value of my TabContainer to "block", it doesn't show and remains hidden. Analyzing the HTML with Firebug shows the style.display is now "block" but the container remains hidden.

I am updating the stlye.display using the code below when a button is clicked

dijit.byId("eventsTab").domNode.style.display = 'block';

Below is the html code for my tab container.

div id="eventsTab" dojoType="dijit.layout.TabContainer" preload="true" 
  parseOnLoad="true" style="width: 100%; height: 40em; display: none">
    div id="webEvents" dojoType="dojox.layout.ContentPane"  title="Web Events" selected="true">
        No Events
    /div>
    div id="trimEvents" dojoType="dojox.layout.ContentPane" title="Other Events">
        No Events
    /div>
/div>

Any help will be appreciated. Thanks!

try with

Submitted by spaceyoyo on Wed, 01/07/2009 - 09:58.

try with dojo.byId("eventsTab").style.display = 'block';

TabContainer BUG in IE (at least in 7.0)

Submitted by msovidiu on Fri, 10/24/2008 - 08:36.

I was trying to dynamically add/remove children.
The container was not visible, I wanted to make it visible AFTER full fully loading the data using AJAX, number of tabs and theirs content is unknown statically.
In Firefox 3 and Safari it is working just fine but in IE 7 I just get an Invalid argument.(on line 21, unknown file).
Any idea about how this can be patched ?
PS: I am using DOJO 1.1.1.

Use Script Debugger to find problem in IE7

Submitted by prajwala on Fri, 10/24/2008 - 11:32.

If you are using IE7 then you can able to point out error very easily, like on which line the error is. Go to 'Tools’, then ‘Internet Options…’, click the Advanced tab and uncheck ‘Disable Script Debugging (Internet Explorer)’. Then, when you visit a page with a javascript error, it asks you if you want to debug it. Fantastic!.

see trac ticket #8024

Submitted by fl0 on Tue, 11/25/2008 - 15:03.

http://bugs.dojotoolkit.org/ticket/8024

Horizontal Tabs instead of Vertical

Submitted by azwar on Wed, 01/21/2009 - 01:40.

I am using version 1.2.3 and when I use the above code I get Horizontal tabs, however when I change the sources from using http://o.aolcdn.com/dojo/1.0.0/ to refer to my own javascript files, the tabs become vertical. I tried searching the documentation or others places and couldn't find anything.

Can anybody PLEASE help?

this is the page I am working on
http://dev.its-dispatch.com/dojo.php

Horizontal Tabs for me, too

Submitted by mhadick on Sat, 02/21/2009 - 03:49.

I also changed to use version 1.2.3, and the tabs changed as well.

Search

The Book of Dojo

TabContainer

Examples

Accessibility

Keyboard