Rounded tabs with dijit Theming
by Nikolai Onken

Everybody likes rounded buttons, rounded page elements and last but not least, rounded tabs. Fortunately dijit comes with great theming possibilities, so I will show you how you can make your own fancy rounded tabs using a simple image sprite and a couple of CSS classes.

Let’s take a look at our final result first, to get you excited and to show what you will learn in this tutorial

Rounded tabs

Now we have to consider a couple of things before we get started. These are issues you might not think of in the first place, but down the line it is important to keep them in mind.

  1. Our tabs need to be width independent. We don’t know how long the containing text will be
  2. Our tabs need to be height independent. Always keep user accessibility in mind. Some people don’t see as well as you do and they will want to look at your site in a different scale.

Following these two points will create a few visual drawbacks which we’ll see later in this tutorial. Of course you could say “Ohh, I don’t care about these things”—especially point #2—but keep in mind that you might lose a certain kind of audience.

Enough talking, let’s get started and make a fancy tab design in your favorite imaging software, and don’t forget the rounded corners!

The graphics

Looking at the above Design we can agree on the fact that the left and right corners should be separate images. We can make a centered image and repeat it on the x-axis to fill potentially large widths.

Tabs cut VS. Tabs cut long

All we need is a simple image sprite and we’re ready to write our own CSS rules.
You might realize that the following sprite contains 9 images, and you might have expected 6. Well, since dijit supports a hover state for tabs I decided to implement a hover state as well. In the end of the tutorial I will explain what you need to do to get rid of the hover state if you don’t want it.
So, the sprite contains nine images:

  1. Active Tab - Left (no repeat)
  2. Active Tab - Center (this one repeats itself on the x-axis)
  3. Active Tab - Right (no repeat)
  4. Hover Tab - Left (no repeat)
  5. Hover Tab - Center (this one repeats itself on the x-axis)
  6. Hover Tab - Right (no repeat)
  7. Inactive Tab - Left (no repeat)
  8. Inactive Tab - Center (this one repeats itself on the x-axis)
  9. Inactive Tab - Right (no repeat)
Tab sprite

This is all we need to get started with writing our rounded tabs CSS rules.

The CSS

Lets take a look at the tab template in dijit/layout/templates/_tabButton.html (Sorry for the bad formatting.. the plugin doesn’t like this piece of html :| )

<div waiRole="presentation" dojoAttachEvent='onclick:onClick,onmouseenter:_onMouse,onmouseleave:_onMouse'>
    <div waiRole="presentation" class='dijitTabInnerDiv' dojoAttachPoint='innerDiv'>
        <div waiRole="presentation" class='dijitTabContent' dojoAttachPoint='tabContent'>
            <span dojoAttachPoint='containerNode,focusNode'>${!label}</span>
            <span dojoAttachPoint='closeButtonNode' class='closeImage' dojoAttachEvent='onmouseenter:_onMouse, onmouseleave:_onMouse, onclick:onClickCloseButton' stateModifier='CloseButton'>
            <span dojoAttachPoint='closeText' class='closeText'>x</span>
            </span>
        </div>
    </div>
</div>

We can see that there are two useful classes: dijitTabInnerDiv and dijitTabContent. You might realize that we need three classes to successfully do our job. You are right, and luckily dijit inserts one more class when creating the tabs called dijitTab. Now with these three available classes in place we need to agree on which image gets to be used for which class.

First of all, and most easily, the class .dijitTabContent will have to use the center x-repeating image. dijitTabContent contains the content of the tab and stretches with its width.
The rest is easy: .dijitTab uses the left image and .dijitTabInnerDiv the right image. Let’s get started.

Let’s take a look at a Dojo Toolkit default styling for tabs:

Please confirm your order

Please order your food

Please order your drinks

And now let’s modify the corresponding CSS:

.dijitTab {
	background: url("images/tabcontainersprite.gif") no-repeat 0 -300px;
	padding:0px;
	margin-bottom: 1px;
	border: none;
	font-family: Tahoma, Arial;
	font-size: 18px;
	color: #a9a098;
}
 
.dijitTabContent {
    background: url("images/tabcontainersprite.gif") repeat-x 0 -350px;
	padding:5px 10px 5px 10px;
	border: none;
}
 
.dijitTabInnerDiv {
    background: url("images/tabcontainersprite.gif") no-repeat right -400px;
	padding:0px 10px 0px 10px;
	border: none;
}

And it will look like:

Please confirm your order

Please order your food

Please order your drinks

That is already pretty close isn’t it?

Now we need to create the right CSS classes for the non-active and hover tabs. Dijit tabs support two additional CSS classes called .dijitTabChecked (for the current active tab) and .dijitTabHover (for the hovered tab). Let’s add them to the same CSS file.

.dijitTabHover {
	background: url("images/tabcontainersprite.gif") no-repeat 0px -150px;
}
 
.dijitTabHover .dijitTabInnerDiv {
	background: url("images/tabcontainersprite.gif") no-repeat right -250px;
	border: none;
}
 
.dijitTabHover .dijitTabInnerDiv .dijitTabContent {
	background: url("images/tabcontainersprite.gif") repeat-x 0 -200px;
	padding:5px 10px 5px 10px;
}
 
.dijitTabChecked {
	/* the selected tab (with or without hover) */
	background: url("images/tabcontainersprite.gif") no-repeat 0px -0px;
	margin-bottom: 0px;
	color: #3b3836;
}
 
.dijitTabChecked .dijitTabInnerDiv {
	padding:0px 10px 0px 10px;
	background: url("images/tabcontainersprite.gif") no-repeat right -100px;
	border: none;
}
 
.dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
	background: url("images/tabcontainersprite.gif") repeat-x 0 -50px;
	padding:5px 10px 6px 10px;
}

And we’ll get:

Please confirm your order

Please order your food

Please order your drinks

Of course we are still missing the fading background. To change a tabcontainers background we simply have to change the .dijitTabPaneWrapper class and add the correct background image.

.dijitTabPaneWrapper { /* Container for tab content */
	/*
	overflow: hidden;
	*/
	background: url("images/tabbg.gif") no-repeat;
	width: 452px;
	height: 267px;
	border: 0;
	padding: 10px;
}

And we’re done! We have fancy rounded tabs and they work.

Please confirm your order

Please order your food

Please order your drinks

As I promised earlier I also will show how to have tabs without the hover state. It is simple: just delete all classes containing .dijitTabHover and you’re all set.

Please confirm your order

Please order your food

Please order your drinks

Some notes

What does the padding do in all the .dijitTabContent classes?
The padding is the “tricky” business of creating the correct layout for the tabs. Just try playing around with its values and you will see what it does.
Tip: since the margin-bottom of the active tabs is different than the one of the inactive tabs, the top or bottom padding has to be different as well.

Why do we have margin-bottom: 1px in the inactive tabs and margin-bottom: 0px in the active tabs?
When you take a closer look you will see that the active tabs don’t have a border on the bottom side. The only way to achieve this is by laying the tab itself over the tab container (the part where we have all the content). To really understand what is happening I also suggest that you just play with the values and see what happens.

How about bottom and left/right tabs?

Well, I think I’d better leave this challenge to you for now. Fortunately the nihilo and soria theme of the Dojo Toolkit have examples of rounded bottom/left/right tabs. Take a peak into the source and you will see.

Downloads for this tutorial

Download a working example of this tutorial.

To get the example up and running you have to extract it into a folder on your computer, download the latest Dojo Toolkit release, extract the release into a folder called dojotoolkit (in the same folder as the tutorial files), and then you’ll be ready to enjoy rounded tabs.

Tags: , ,

This entry was posted on Friday, February 22nd, 2008 at 11:11 pm and is filed under Beginners, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses to “Rounded tabs with dijit Theming”

  1. rsaccon Says:

    Nikolai, great tutorial, great eye candy, as your slick nihilo theme !

  2. Javascript News » Blog Archive » Rounded tabs with Dijit Says:

    [...] Onken has written a detailed post on rounded tabs and how to get them all nice and happy with [...]

  3. Dijit: Rounded Tabs » D' Technology Weblog: Technology, Blogging, Tips, Tricks, Computer, Hardware, Software, Tutorials, Internet, Web, Gadgets, Fashion, LifeStyle, Entertainment, News and more by Deepak Gupta. Says:

    [...] Full Article [...]

  4. Fatih Hayrioğlu’nun not defteri » 01 Mart 2008 web’den seçme haberler Says:

    [...] Yuvarlak kenarlı tab menü yapmak. Bağlantı [...]

  5. likeasuperman Says:

    Hi Nikolai. what a great tutorial you have. Keep up the good work :) . *from yuri, Indonesia.

  6. A collection of Rounded Corners Tab Menus | HTML & CSS Says:

    [...] Rounded tabs with dijit Theming [...]

  7. 5 Easy Tutorials for Advanced JavaScript using Dojo | Kyle Hayes Says:

    [...] Rounded tabs with themes Everybody likes rounded buttons, rounded page elements and last but not least, rounded tabs. Fortunately dijit comes with great theming possibilities, so I will show you how you can make your own fancy rounded tabs using a simple image sprite and a couple of CSS classes. View tutorial >> [...]

  8. Dojo Javascript Framework Toolkit, Take your Apps to the Next Level | tripwire magazine Says:

    [...] Rounded tabs with dijit Theming [...]

  9. Getting StartED with Dojo » 5 Easy Tutorials for Advanced JavaScript using Dojo Says:

    [...] Rounded tabs with themes Everybody likes rounded buttons, rounded page elements and last but not least, rounded tabs. Fortunately dijit comes with great theming possibilities, so I will show you how you can make your own fancy rounded tabs using a simple image sprite and a couple of CSS classes. View tutorial >> [...]

Leave a Reply

You must be logged in to post a comment.