CODEWITHSUNDEEP
jqueryjquery-ui
Tom Cruise
Tom Cruise

Reputation: 1425

How to change the jquery ui dialog button color?

I need to change the color of jquery ui dialog button color by adding a class of another css.

  $('.ui-dialog-buttonpane').find('button').addClass('cancelButton');

The above line of code has been used to change the css class but it doesnt help to change the color.

A sample code has been placed in the following fiddle.

http://jsfiddle.net/DOmEl/PCkQD/5/

Can anyone help me to identify what is the issue here?

Upvotes: 3

Views: 23286

Answers (5)

Mduja
Mduja

Reputation: 11

$('#dialog').html("This is a confirmation dialog.");
$( "#dialog" ).dialog({
    buttons: [
        {
            text: "OK",
            open: function() {
                $(this).addClass('okClass');
            },
            click: function() {
                alert("OK");
                $( this ).dialog( "close" );
            }
        },
        {
            text: "CANCEL",
            open: function() {
                $(this).addClass('cancelClass');
            },
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
});

Upvotes: 1

Daniel Więcek
Daniel Więcek

Reputation: 625

Gruff Bunny is right, but the code is very simple. More useful code can look like:

$('#dialog').html("This is a confirmation dialog.");
$('#dialog').dialog({
            buttons : [
                {
                    text:'OK',
                    class:'green',
                    click: function() {
                        alert("OK");
                        $(this).dialog("close");                        
                    }                   
                },
                {
                    text:'CANCEL',
                    class:'red',
                    click: function() {
                        $(this).dialog("close");
                    }                   
                }
            ]
        });

Upvotes: 4

Gruff Bunny
Gruff Bunny

Reputation: 27986

You can also set the class of a button when initialising the buttons collection:

buttons: [ { text: 'Cancel', class : 'cancelButton' } ]

Upvotes: 6

Shimon Rachlenko
Shimon Rachlenko

Reputation: 5517

The jquery-ui buttons are not html buttons. They are constructed using divs and spans. Thus you need to find it by other means, like class or id:

$('#btnCancel').addClass('cancelButton');

See updated fiddle

Edit

If you want to change multiple buttons then either find or add common class, like in ArunPJohny's answer. All ui buttons already have the ui-button class, and this is enough in some cases.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

Try

$('#message1').find('.ui-button').addClass('cancelButton');

and

.ui-button.cancelButton {
    border: 1px solid #aaaaaa
    /*{borderColorContent}*/
    ;
    color: #FF0000
    /*{fcContent}*/
    ;
}

Demo: Fiddle

Upvotes: 3

Related Questions