How to create multiple button styles with jquery ui?

Is there a way using jquery ui theme roller or otherwise to create more than one style for buttons (specifically jquery ui buttons)? If you look at the generated themes - it only 开发者_开发技巧seems to allow one button style.

Keywords being "jquery ui"; I understand how to do this in css, but using jquery ui helps keep widgets / css playing nicely.

Yes you can create more then one style using one jQuery UI theme. In the example below, i have 3 different buttons each with a different color and all using the same default UI theme. To do this, You need to redefine the UI CSS class of of the element you are working with. For example, to make a button use the UI styling, you need to include the class name ui-state-default. Note how in this example i included this same class for all the buttons. To override this UI class for a specific button we reference the button by adding another class to it then style it in our css and mark it as important. This will override the UI styling for the class you are working with.

<button class="ui-state-default one">button one</button>
<button class="ui-state-default two">button two</button>
<button class="ui-state-default three">button three</button>

button{
    width:200px;
    height:50px;
    display:block;
    margin:10px;
}

.two{
    background: orange url(http://www.cyrilsframing.com.au/picts/menu.gif) repeat-x 0 0 !important;
    border:1px solid red!important;
}

.three{
    background: orange url(http://cmshuts.com/picts/background-menu-horz.gif) repeat-x 0 0 !important;
    border:1px solid yellow!important;
}

View working example at http://jsfiddle.net/7vvhj/2/

For more on how to style your elements using jQuery UI check the following 2 links

http://wiki.jqueryui.com/w/page/12137970/jQuery-UI-CSS-Framework

I have been trying to do this recently and ended up choosing a base theme, creating new styles for the different button (eg: for a save button, see styles below) You just need to add the class "save-button" to the button (in my case I am using anchors as buttons)

a.save-button
{
    background-image:none;
    border: 1px solid #FF0000;
    background-color:#FC8C8C;
    color:#FFFFFF;
}
a.save-button:hover
{ 
    border: 1px solid #FF0000;
    background-color:#FDB7B7;
    color:#000000;
}

UPDATE:

I just needed to do this again, except cater for the gradients in the buttons; I did this by creating a new theme, then copying out the gradients (..hard.. and ..soft..) and renaming them to not get confused with the main theme, ie when they get updated... then just added the class to the button, similar to the above....

a.green-button
{
    background: url(Images/GreenBGHardGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:hover
{ 
    background: url(Images/GreenBGSoftGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:active
{
    background-color:#FFFFFF;
    border: 1px solid #132b14;
    color:#132b14;
}

You could just use the "button" widget, and then change the state class from 'ui-state-default' to something else [i.e. 'ui-state-error' or 'ui-state-highlight']. However, these states look less like an actual button than the default state.

$("button").button().addClass('ui-state-highlight');

EXAMPLE: http://jsfiddle.net/dochoffiday/Kg5qn/

Also, you can use more than one jQuery UI theme on a page by introducing UI 'scope', as demonstrated by the Filament Group:

http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/

Assuming you've created multiple classes for the various button themes, I think you can change a button's markup, in which you could change the classes to match the various button themes.

I haven't tested this, just trying to possible point you in the right direction :-)

One thing you need to watch out for is the .ui-state-default style.

I have buttons in a dialog box, that for some reason is getting the .ui-state-default applied to them when a second dialog box is opened. I assume the dialog widget is trying to reset the state to default and this is applied to the buttons too.

Method 1:

Anyway I decided the easiest way was to put !important on the style to prevent this default state (from the theme roller style) from taking precedence.

a.green-button
{
    background-color:#FFFFFF !important;
    border: 1px solid #132b14 !important;
    color:#132b14 !important;
}

Method 2:

Alternatively you can apply the style like this, which will give this style more points without needing !important :

a.green-button, a.ui-state-default.green-button
{
    background-color:#FFFFFF;
    border: 1px solid #132b14;
    color:#132b14;
} 

This is the original css that is overwriting my style if I don't use !important :

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1; background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; }