Dijit’s TabContainer Layout: Easy Tabbed Content

By  on  

One of Dojo's major advantages over other JavaScript toolkits is its Dijit library.  Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates.  One very useful layout class is the TabContainer.  TabContainer allows you to quickly create a tabbed content layout with minimal effort.  Keep reading to see what you can create in just 10 minutes!

Dojo Dijit Tabs

The Basic Dijit HTML

<style type="text/css">
	/* bring in the claro theme */
	@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";

	/* bring in the widget-specific CSS classes */
	@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/layout/ContentPane.css";
	@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/layout/TabContainer.css";
</style>
<body class="claro">

The first piece of HTML requires grabbing the required CSS theme files and adding the theme name as a class to the BODY tag.  All widgets on the page will use the claro theme unless otherwise specified.  Once we have those details out of the way, we can code the HTML structure of TabContainer and ContentPanes:


<!-- will set the eventual dimensions for the tab container -->
<div style="width:600px;height:300px">
	
	<!-- will host all tabs and their content panes -->
	<div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width:100%;height:100%;">
		
		<!-- content panes: title is tab name, make this tab selected -->
		<div dojoType="dijit.layout.ContentPane" title="Rod Stewart" selected="true">			
			<p>Roderick David "Rod" Stewart, CBE (born 10 January 1945)[1] is a British singer-songwriter...</p>			
		</div>
		
		<!-- content panes: title is tab name, no special features here -->
		<div dojoType="dijit.layout.ContentPane" title="Oasis">
			<p>Oasis were an English rock band that formed in Manchester in 1991...</p>
		</div>
		
		<!-- content panes: title is tab name, make this tab closable -->
		<div dojoType="dijit.layout.ContentPane" title="ColdPlay" closable="true" onClose="alert('Closing Tab!');">
			<p>Coldplay are an English alternative rock band...</p>
		</div>
		
		<!-- content panes: title is tab name, load content remotely, preload -->
		<div dojoType="dijit.layout.ContentPane" title="SomeBand" href="some-page.html" preload="true">
			<p>Lorem ipsum...</p>
		</div>
		
	</div>
</div>	

You'll notice the dojoType attribute on a few of the DIVs;  that means we're creating our widgets declaratively, not programatically.  We'll address what that means in a moment.   For now, realize that the dojoType attribute's content is the name of the JavaScript class that it will become.  The title attribute text will become the actual tab's content.  Adding a selected attribute will make the given tab start as the selected tab, and adding a closable attribute will make the tab closable.

So how does Dojo know to turn these boring DIVs into rich widgets? parseonLoad!

Including Dojo with parseOnLoad; Requiring Dijit Widget Classes

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad:true"></script>

We start by pulling Dojo into the page with a normal SCRIPT tag (AOL CDN, Google CDN, local build).  Note that I've added a djConfig attribute with parseOnLoad:true; -- this will instruct Dojo to scour the page looking for Dijit widgets once the required classes have loaded.  How do we require the proper classes?  By using dojo.require, of course:

<script type="text/javascript">
	/* require necessary classes */
	dojo.require('dijit.layout.TabContainer');
	dojo.require('dijit.layout.ContentPane');
	dojo.require('dijit.form.Button');
	
	/* when all classes have loaded... */
	dojo.ready(function() {
		/* 
			don't need to do anything programmatically!
			parseOnLoad and dojoType does the magic!
		*/
	});
</script>

With the proper classes loaded, Dojo will now find all widgets and inject widgets into the page as necessary.

That's It?!

Yep.  The demo I've provided to me roughly 10 minutes to create.  I spent more time looking for information on Wikipedia than I did putting together the tab layout.  I really love the declarative method of widget creation -- it's less JavaScript write and quicker to code.  What you shouldn't lose sight of is that you can also control the Dijit widget programmatically after it's been created.

Dynamically Adding Tabs

To this point our layout is static and was built declaratively.  Let's add a Button widget to the page that, when clicked, adds a new tab to the container:

<button dojoType="dijit.form.Button" id="addButton">Add New Tab</button>
<script type="text/javascript">
dijit.connect('addButton')
dijit.byId('tabContainer').addChild(new dijit.layout.ContentPane({ title:'New Tab!', content:'This is new content!', closable:true }));
</script>

I've used onClick to add a click event listener to the button which programmatically adds a new ContentPane to the TabContainer.  We start by grabbing the widget with dijit.byId and proceed to add the new ContentPane instance as a child.  The object properties passed as parameters should be self explanatory but there's one more bonus -- if you prefer to loaded content from another file via AJAX, all you need to do is provide the file path via the href property.  You may also preload the content of that pane by setting the preload property to true:

<button dojoType="dijit.form.Button" id="addButton" onClick="dijit.byId('tabContainer').addChild(new dijit.layout.ContentPane({ title:'New Tab!', content:'This is new content!', closable:true }));">Add New Tab</button>

Doesn't it seem almost too easy?

TabContainer Accommodations

Dojo Tabs Container

Another awesome part of using Dojo TabContainer is that the class monitors the number of tabs and, if the tabs stretch further than the container's width, will add scrolling left and right controls as well as a table of contents dropdown to easily navigate through the tabs. Additionally, the tab system is completely accessible and keyboard shortcuts work wonderfully!

You may also designate where tabs should display: right-h, left-h, bottom, and top, which is the default. These options are placed within the tabPosition setting:

<div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width:100%;height:100%;" tabPosition="right-h">

Your layout changes simply by providing one parameter!

Possibly the best part about Dijit is just how easy it is to take a static set of HTML markup and make it dynamic, especially when using the dynamic method of widget creation.  I encourage you to give Dijit a go by starting with this tutorial.  I also encourage you to take a look at Dojo's infamous Theme Tester page.  Theme Tester will show you just about every widget within Dijit in one spot.

Have any questions about jumping into Dijit?  Ask away!

Recent Features

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • By
    How to Create a RetroPie on Raspberry Pi &#8211; Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

Incredible Demos

  • By
    Redacted Font

    Back when I created client websites, one of the many things that frustrated me was the initial design handoff.  It would always go like this: Work hard to incorporate client's ideas, dream up awesome design. Create said design, using Lorem Ipsum text Send initial design concept to the client...

  • By
    Smooth Scrolling with MooTools Fx.SmoothScroll

    I get quite a few support requests for my previous MooTools SmoothScroll article and the issue usually boils down to the fact that SmoothScroll has become Fx.SmoothScroll. Here's a simple usage of Fx.SmoothScroll. The HTML The only HTML requirement for Fx.SmoothScroll is that all named...

Discussion

  1. Dijit works best when used in web apps. I found this breaking after parsing of dojo’s parse on load a lil annoying, but it’s easy to work around with a loader spinner and this code:

    dojo.addOnLoad(function() {
       dojo.query('#urWraperId').style({display:''});
       dojo.query('#urLoaderSpinner').style({display:'none'});
    });
  2. woow its really cool tabs system Dojo got a nice UI systems?

  3. Richard

    Hello David!!!

    Great work!!

    Do you have this example in jquery framework…? I´m very interested in this solution..
    Or, how develope this example on a jquery plattform…?

    Regards….and thanks!!!

    • jQuery UI has a similar tab widget system but it’s not nearly as advanced as Dojo’s.

    • Richard

      Ok…thanks for the tip!!

  4. look in while comment :D
    awesome tabview, and this is the tab container ck ck ck…

  5. Brock Heinz

    Thanks, David.

    I just have one question regarding the claro CSS that is applied when the tabs are on the left (tabPosition=”left-h”). When clearing browser cache via a refresh (Command + Shift + R with Firefox), the border is broken on the left hand side of the content pane? Do you know why? I’ve been tinkering with Firebug, but I’m hoping you’ll have a quick answer :)

    I’ve tested this with your example here:

    http://davidwalsh.name/dw-content/dojo-tabs.php?position=left

    Any suggestions?

    Thanks,
    Brock

  6. Brock Heinz

    … hmm, my observation isn’t limited to your example, David. I also see the same issue here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/test_TabContainer.html

    Any ideas on how to get around this? Does it happen because the layout dijits begin rendering before the CSS is entirely downloaded and processed by the browser?

    • Brock Heinz

      *bump* :) Any feedback on this CSS flaw, David?

  7. Piyush Sah

    Here is that piece of code,over here I have declaritively given href to calendar.html…..The calendar.html which is also made with dojo works fine when run alone…But when I do it through my other page called admin.html, the page calendar.html is displayed in the content pane but it does not show any of the dojo effects like validation & a calendar widget etc..

  8. Kirk

    I am looking to add tabbed content to emails that we generate, but find that the code the code that works on the web will not transfer into emails. Will your product generate code that will?

  9. hector

    Hi all..
    how to pass the values dynamically when v add the child tab using tab container..can anyone help me in this..
    Thanks in advance…

  10. Hi David,

    Nice post — thanks.

    Do you have any tips on how to style the tabs themselves, i.e. the clickable bits?

    Would be nice to be able to round them and possibly make them full width, i.e. expand to fill the whole horizontal space (if there are three, each takes a third of the whole pane width, etc.)

    Best regards

  11. hello, I m using this tab container but there is a problem. I want to change the css property of the stylesheet claro.css. The property p{} is making some problem to another element of the page. How can I do this??

  12. Miguel

    Hi there David,

    I’ve been following your blog for a number of years and I think you for your contribution to the net. I have declared a tab container and pragmatically creating tabs dependent on conditions met but, I always get those three long buttons at the top. One pointing down, the other pointing left and finally the last one pointing right. I know I could easily hide these with CSS but would rather not in case I need them later. Also, this does not happen with the declarative example. Any ideas?

    • The TabContainer class has “useMenu” and “useSlider” properties — if you set them to “false”, I imagine those controls would go away.

  13. bonnie

    Hello, this is really great I have been looking for this kind of example with no luck maybe my search queries to google were not right. Though I have one question. Am developing a data grid and after the information is displayed. I want to provide a link for various information about let’s say an Item, then when clicked I want to add new tab which has data about that item so in my case you add new tab button will be a link in my case and also I want to change the text color of the tab title is active and leave other tabs with the original color. Please help. Thanks

  14. Hello,
    Thank you for this excellent resource :-) I am looking for some advice, maybe somebody could help:

    The ‘table of contents dropdown’ is a very powerful feature. Is there away I can activate this by adding a separate button to my page? I want to add an icon call ‘Workflow’ which also revels the ‘table of contents dropdown’. Some users currently miss this feature.

    Or, could I change the current ‘down arrow’ icon with an alternative which draws the users attention to it???

    All help/advice gratefully revived.

    Please assume that I am stupid, I am self taught and most things are new to me.

    Best regards,

    Chris

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!