Dojo is a new pragmatic language specifically geared toward building intuitive widgets. In a world where widgets function as the essential vertebrae in many of a backbone of web applications, we as web designers/developers will probably encounter this language at least once in our careers. And for the UI designer, a lot of UI’s today are being composed of these java-like widgets. Thankfully, the designer will only have to familiarize themselves with the dojo css and not have to write widgets – leave that to dojo-skilled programmers. Although dojo css is different from html css, it is still very similiar. For instance you can use the popular css sliding door method to create tabbed menus. It will only have to be adjusted a little to the context of dojo css in order to work, but the effect is the same.

In dojo, you will have a div typically called your header in which you can place a menu containing div. In our example, we will call this class “tabHeader”. We will give the class the following details:

.tabHeader {
float: left;
width: 729px;
margin-top:22px;
font-size:xx%;
line-height:normal;
}

In the css sliding door method, the tabbed menu is a magical dance of background images overlapping at the appropriate moments contained within an outer div, such as our div class “.tabHeader”. Because dojo css is different than html css, we have to adjust the css to fit the styling language of dojo widgets. We will still achieve the greal load optimization of the css sliding door effect. Dojo css is heavily dependent on relevancy states and parent/child relationship styles. It may seem daunting and confusing at first, but it actually makes more practical sense and will nicely adhere to WC3 usability guidelines.

We will next set the css of the unordered list: margins and padding to 0 and list-style to none. For dojo we can use the div class “.tabHeader” as the relevant class for the unordered list:

.tabHeader ul {
margin:0;
padding:0;
list-style:none;
}

Instead of using a “.class a” style to contain our left half of the sliding door, in dojo we will create just another class and write it like this:

.tabHeader .tabItemContainer {
float:left;
background:url(images/image.png) no-repeat top left;
margin-left:5px;
padding: 0 0 0 5px;
font-weight:bold;
color:#hex;
text-decoration:none;
cursor:pointer;
}

Think of “.tabItemContainer” as your “a” link class. See how we pop the class “.tabHeader” in front of the “.tabItemContainer”? He’s a parent and also a child class. His parent is the div class “header”. Now if you would like a background for the unordered list, because you are using png’s for the sliding doors, you have to set a class for the background image. Kinda weird, but that’s dojo for you.

.tabHeader .tabItemContainer .tabBackground {
background:url(images/rightHalf.png) no-repeat;
}

Now the css sliding door effect relies on an oversized background image that slides out as the title text gets longer. Even though we have styled a class for this expanding right side, we have only styled its background image. Dojo calls for another class to style a container for the text. It will follow the link class “.tabItemContainer” as such:

.tabHeader .tabItemContainer .tabItemContent {
display:block;
background-position:top right;
padding:5px 15px 4px 10px;
font-weight:bold;
color:#hex;
text-decoration:none;
}

In this example the class “.tabItemContent” is similiar to a list class in html. The css sliding door effect depends not only on a background image, but also the background positioning of that image:

.tabHeader .tabItemContainer:hover {
background-position:0% -36px;
}

and background positioning of contained text:

.tabHeader .tabItemContainer:hover .tabItemContent {
background-positioning:100% -36px;
color:#hex;
}

The background image is 36px tall. Stacking an inactive state background image atop a hover state background image contributes to the css sliding door effect. In my example I have chosen to use a separate tab appearance for “current” state that is different for each page. The “current” class works for tabs that are differentiated only by their text, while separate classes are used for tabs that not only change in textual appearance, but may also contain a rollover image:

.tabHeader .current {
background-position:0% -36px;
font-weight:bold;
color:#hex;
text-decoration:none;
}

.tabHeader .current .tabItemContent {
background-position:100% -36px;
padding-bottom:5px;
font-weight:bold;
color:#hex;
text-decoration:none;
}

.tabHeader .tabItemContainer .secondTab {
background-image:url(images/second.png);
padding-right:40px;
}

Since only the background images are changing, and not the appearance of the text, with states, we only have to create classes for the right side background images. If you wanted to have different textual appearances for the state changes you would have to add in the following class:

.tabHeader .tabItemContainer .secondTab {
color:#hex;
font-weight:100;
}

and then change its color also in a “.tabHeader .tabItemContainer:hover .secondTab” class.