Login Register

Round Tabs

Submitted by ltn2k on Fri, 11/09/2007 - 20:29.

Hi,

Has anyone been able to have rounded corners on tabs? I guess we must extend the dijit.layout._TabButton widget.
I'm not yet too confortable working with Dojo, anyone have an idea on how to extend this widget? I think we have to modify the template string to be able to have divs with each having their own background image.

Help please :)

‹ About Trees and Children. Question set initial dimension of contentPane on SplitPane ›

Yes - I think that's the

Submitted by toonetown on Fri, 11/09/2007 - 21:01.

Yes - I think that's the only way to be able to style it with rounded corners...

All you need to do is extend the widget and replace the templateString - something like:

dojo.declare("my.custom.widget", dijit.layout._TabButton, {
    templateString: "<!-- New Template string - use the stock one for a starting point -->"
});

However, this actually brings up a good point - and one that I would like to have discussed. In the past, it has been said "We don't care much about having rounded corners" - but obviously *some* people want that ability... In my opinion, for some of the more "main" stock widgets (button, tabs, title pane, etc), the HTML should at least exist such that if a person wants to do rounded corners in their own custom theme, they can do so without having to extend every widget.

Small Test

Submitted by ltn2k on Fri, 11/09/2007 - 21:43.

Hi,

I tried a small test by modifying the templateString and the theme css. It looks decent but I now have to implement the events such as onclick, hover, selected tab, etc. I'm not too familiar on how to do this and I'm not sure it's possible the way I wrote the templateString.
Can anyone help?

Here's my templateString:

templateString:"
\n     \n       ${!label}\n          \n            x\n        \n    \n
\n"

Thanks,

ltn2k

Rounded Tabs using dojo 1.0.2

Submitted by seetharaman on Wed, 01/30/2008 - 12:59.
My application really works very well with the following in FIREFOX: 
1.Rounded tabs
2.Dynamically adding animation to tab text to indicate that tab is loading
3.Dynamically open and close tabs based on application logic

When I use Internet explorer, I do not see rounded tabs any more; but other functionality are working fine.

I use the following code to include js and css files

Are there any tricks to see rounded tabs in IE

 


 

		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.layout.TabContainer");
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them

the comments in

Submitted by dante on Wed, 01/30/2008 - 21:08.

the comments in soria/rounded.css mention the fact the file is experimental test using Firefox and Safari's built in support for the radius: CSS3 attribute. The "new" soria has rounded tabs, but is very different from 1.0.2 soria.

you can preview it here:

http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/te...

New soria.css

Submitted by seetharaman on Wed, 01/30/2008 - 21:57.

It looks very good. Did u test it in IE? When u click on the tab, the left side of the tab becomes white inn IE.
When will this be available for use?

no, the reason it is an

Submitted by dante on Thu, 01/31/2008 - 17:05.

no, the reason it is an "experiment" is because it was secretly waiting on IE to support CSS3 selectors. This file will not exist in the 1.1 version of Soria.

Rounded corners

Submitted by Les on Wed, 01/30/2008 - 13:38.

You might be able to port to Dojo prototype's based rounded.js.

http://www.pragprog.com/titles

It works in IE.

This link looks wonderful.

Submitted by seetharaman on Wed, 01/30/2008 - 14:43.

This link looks wonderful. Not sure as how to make use of this to get my problem solved. I tried to use the rounded.js in my application. No luck..