Wednesday, February 27th, 2008
Rounded tabs with Dijit
<p>
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.
Related Content:
3.8 rating from 32 votes
The tabs are separated from the content panes in Safari 3, leaving a large gap between the two.
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.
Checkout the rounded themes of Bindows 4 (beta-2 released today).
Windows, buttons and tab buttons can all be rounded.
http://www.bindows.net