Why Not?

A few weeks ago I developed a page on Jazz.net that required the functionality from dojo’s dijit.layout.tabContainer. This is a great widget that quickly adds some great organization and functionality to your page. The problem I ran into was customizing the CSS of the Tab Container. This is not a simple task as dojo’s templating system creates a lot of DOM on the page when it is rendered, so the HTML you write with dojo is very simple, but the output is complicated. So with a little reverse engineering, firebug, and an afternoon I was able to customize the tabs to my site’s design specs. You can check out the final product here

Since the DOM structure is really complicated, I am attaching a CSS file of the skeleton template you will need to customize the Tab Container to your site’s designs.

The other problem I ran into was that I needed to add some DOM nodes to the tabs themselves to apply some final touches. To do this, I had to extend the TabContainer widget and change some properties so that I could access the template of the tab itself.

The following code assumes you already have a working knowledge creating/extending dojo widgets, questions dealing with stuff I do not mention here can most likely be answered on the dojo toolkit website

So jumping into the code, to access the tab itself, we must first create the two following functions:

*NAME* should be replaced with the namespace you are using for your site.

——————————————————————-

dojo.declare(/*Namespace of your widget*/ ), dijit.layout.TabContainer, {
	_controllerWidget: "*NAME*.TabController"
});

dojo.declare("*NAME*.TabController",	dijit.layout.TabController, {
	buttonWidget: "*NAME*._TabButton"
});

——————————————————————-

The above code gives gives us access to the _TabButton private widget when the page loads, the following code is where you will place the logic to add the DOM nodes you need:

——————————————————————-

dojo.declare( "*NAME*._TabButton", dijit.layout._TabButton, {
	postCreate: function() {
		this.inherited(arguments);
                this.innerDiv = /*DO STUFF*/;
        }
});

——————————————————————-

In the above code, this.innerDiv is the important detail. this.innerDiv is the dojoAttachPoint to one of innermost divs on a tab, one level deeper gives us access to the node that contains the title of the div, and is probably not something you want to mess with unless you know what you are doing. To access the other dojoAttachPoints of the Tab, take a look at the tabs in the source or with Firebug on the live page. This tutorial was to help get past all the crud of figuring out how to access the DOM of the tab itself. Here is our final product:

——————————————————————-

(function(){

dojo.provide( /*Namespace of your widget*/ );
dojo.require("dijit.layout.TabContainer");

dojo.declare(/*Namespace of your widget*/ ), dijit.layout.TabContainer, {
	_controllerWidget: "*NAME*.TabController"
});

dojo.declare("*NAME*.TabController",	dijit.layout.TabController, {
	buttonWidget: "*NAME*._TabButton"
});

dojo.declare( "*NAME*._TabButton", dijit.layout._TabButton, {
	postCreate: function() {
		this.inherited(arguments);
		this.innerDiv = /*DO STUFF*/;
	}
});

})();

——————————————————————-

Download CSS Skeleton for TabContainer