Rounded tabs with Dijit

Category: CSS , Dojo

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

Although the example is focused on Dijit and tweaking the tab template:

<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><span dojoAttachPoint='closeText' class='closeText'>x</span>
</div>
</div>
</div>

The technique is just CSS, and could be used for anything.

Posted by Dion Almaer at 6:05 am
3 Comments

3.8 rating from 32 votes

3 Comments »

Comments feed TrackBack URI

The tabs are separated from the content panes in Safari 3, leaving a large gap between the two.

Comment by John Hann — February 27, 2008

This error unfortunately is still present in dojo 1.0.2 but does not have anything to do with the CSS itself. The issue is fixed in dojo 1.1 which will be released in a few weeks.

To get around it, download the latest nightly (DojoCampus is running on 1.0.2) or resize your safari browser window. The tabs then will size correctly.

Comment by nonken — February 27, 2008

Checkout the rounded themes of Bindows 4 (beta-2 released today).
Windows, buttons and tab buttons can all be rounded.

http://www.bindows.net

Comment by ranmeriaz — February 27, 2008