jQueryUI button with multiple styles on single page

Question

I'd like to use several buttons on single page, but I want to have one group which has one style (e.g. red color) and other one with different style (e.g. gray background and red forecolor).

Is it somehow possible?

Answer 1

Yes you can. The way to do this would be to use the css scope option when downloading the ui - http://jqueryui.com/download/

Simply include the framework, and the include both stylesheets with the different styles. Make sure to apply different css scopes (e.g. .light-style and .dark-style).

Next, in your html, whenever you show the buttons, add the appropriate CSS scope to the parent element so that the correct style is picked up.

You can also manually combine the two stylesheets so that you save space. This is assuming you only want the two differing button styles only.

Answer 2

Read the theming section here: http://api.jqueryui.com/button/

You can always add extra class to change the style. So after calling button() on an element, you can:

$(element).removeClass("ui-button-text");
$(element).addClass("ui-button-text-2");

and of course you need to define your own CSS class for this:

.ui-button-text-2 { color: red; }

This is of course clumsy, because you need to use two calls instead of a single button() call. But jQuery can be extended - you can simply create a $.themedbutton() method that accepts extra parameters...