More TabContainer Examples¶
| Status: | Draft |
|---|---|
| Version: | 1.2 |
Tab Strip¶
This is a plain TabContainer with three tabs, fixed height and a tab strip. The tabstrip is especially useful when the TabContainer is child of a BorderContainer.
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
</script>
The html is very simple
<div dojoType="dijit.layout.TabContainer" style="width: 400px; height: 100px;" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
Lorem ipsum and all around...
</div>
<div dojoType="dijit.layout.ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div dojoType="dijit.layout.ContentPane" title="My last tab">
Lorem ipsum and all around - last...
</div>
</div>
The doLayout attribute currently only works for top tabs, left/bottom/right tabs don’t support it. You can set a tab strip on every tab type though. Following a few examples with left/bottom/right tabs using tabStrip here and there.
Right Tabs¶
Tabs at the right, no strip. Note that right tabs don’t work in conjunction with doLayout=false.
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
</script>
notice the tabPosition attribute
<div dojoType="dijit.layout.TabContainer" style="width: 400px; height: 100px;" tabPosition="right-h">
<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
Lorem ipsum and all around...
</div>
<div dojoType="dijit.layout.ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div dojoType="dijit.layout.ContentPane" title="My last tab">
Lorem ipsum and all around - last...
</div>
</div>
Left Tabs¶
Tabs at the left, with a strip. Note that left tabs don’t work in conjunction with doLayout=false.
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
</script>
notice the tabPosition attribute
<div dojoType="dijit.layout.TabContainer" style="width: 400px; height: 100px;" tabPosition="left-h" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
Lorem ipsum and all around...
</div>
<div dojoType="dijit.layout.ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div dojoType="dijit.layout.ContentPane" title="My last tab">
Lorem ipsum and all around - last...
</div>
</div>
Bottom Tabs¶
Tabs at the bottom,with a strip. Note that bottom tabs don’t work in conjunction with doLayout=false.
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
</script>
notice the tabPosition attribute
<div dojoType="dijit.layout.TabContainer" style="width: 400px; height: 100px;" tabPosition="bottom" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
Lorem ipsum and all around...
</div>
<div dojoType="dijit.layout.ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div dojoType="dijit.layout.ContentPane" title="My last tab">
Lorem ipsum and all around - last...
</div>
</div>
One technique to allow validation, and still use the parser would be to simply decorate the node with a dojoType attribute (after onLoad) and parse the parent node. For ease, we’ll store the class name for our inner widgets in a rel=”” attribute.
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
dojo.query("div[rel]").forEach(function(n){
var className = dojo.attr(n,"rel");
// now set it
dojo.attr(n, "dojoType", className);
});
dojo.parser.parse("progtabwrapper");
});
</script>
<div id="progtabwrapper">
<div rel="dijit.layout.TabContainer" style="width: 400px; height: 100px;">
<div rel="dijit.layout.ContentPane" title="My first tab">
Lorem ipsum and all around...
</div>
<div rel="dijit.layout.ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div rel="dijit.layout.ContentPane" title="My last tab">
Lorem ipsum and all around - last...
</div>
</div>
</div>
Programmatic Example¶
Here’s an example that parses existing DOM and creates tabs, similar to what the parser does:
As a simple example, we’ll use dojo.query to find and create the ContentPanes used in the TabContainer
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.addOnLoad(function(){
dojo.query(".tc1cp").forEach(function(n){
new dijit.layout.ContentPane({
// just pass a title: attribute, this, we're stealing from the node
title: dojo.attr(n,"title")
}, n);
});
var tc = new dijit.layout.TabContainer({
style: dojo.attr("tc1-prog", "style")
},"tc1-prog");
tc.startup();
});
</script>
The html is very simple
<div id="tc1-prog" style="width: 400px; height: 100px;">
<div class="tc1cp" title="My first tab">
Lorem ipsum and all around...
</div>
<div class="tc1cp" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div class="tc1cp" title="My last tab">
Lorem ipsum and all around - last...
</div>
</div>
Nested tabs¶
Often sites will have two levels of tabs. This is supported by using two TabContainer widgets. Remember that although a TabContainer’s children are often ContentPanes, they can be any layout widget, including another TabContainer:
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
</script>
The html is very simple
<div dojoType="dijit.layout.TabContainer" style="width: 400px; height: 100px;">
<div dojoType="dijit.layout.TabContainer" title="Tab 1" nested="true">
<div dojoType="dijit.layout.ContentPane" title="My first inner tab" selected="true">
Lorem ipsum and all around...
</div>
<div dojoType="dijit.layout.ContentPane" title="My second inner tab">
Lorem ipsum and all around - second...
</div>
<div dojoType="dijit.layout.ContentPane" title="My last inner tab">
Lorem ipsum and all around - last...
</div>
</div>
<div dojoType="dijit.layout.TabContainer" title="Tab 2" nested="true">
<div dojoType="dijit.layout.ContentPane" title="My first inner tab" selected="true">
Lorem ipsum and all around...
</div>
<div dojoType="dijit.layout.ContentPane" title="My second inner tab">
Lorem ipsum and all around - second...
</div>
<div dojoType="dijit.layout.ContentPane" title="My last inner tab">
Lorem ipsum and all around - last...
</div>
</div>
</div>
When you have nested tabs you should set the nested parameter to true, to make the formatting distinctive from the outer TabContainer.