Rounded tabs with Dijit
Written by on February 27th, 2008 in Ajax News.
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:
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><span dojoAttachPoint=’closeText’ class=’closeText’>x</span>
</div>
</div>
</div>
<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.
Source: Ajaxian
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/242040401/rounded-tabs-with-dijit