jquery dialog save cancel button styling

Question

I am using jquery ui dialogs in my application. How do I style the "Save" and "Cancel" buttons differently in a jquery dialog? So "Save" is more appealing than the "Cancel". I could use a hyper link for "Cancel", but how do I place that in the same button panel?

Answer 1

I looked at the HTML generated by the UI Dialog. It renders buttons pane like this:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
     <button type="button" class="ui-state-default ui-corner-all">Delete all items in recycle bin</button>
     <button type="button" class="ui-state-default ui-corner-all different" style="border: 1px solid blue;">Cancel</button>
</div>

Adding a class to Cancel button should be easy.

$('.ui-dialog-buttonpane :last-child').css('background-color', '#ccc');

This will make the Cancel button little grey. You can style this button however you like.

Above code assumes that the Cancel button is the last button. The fool proof way to do it would be

$('.ui-dialog-buttonpane :button')
    .each(
        function()
        { 
            if($(this).text() == 'Cancel')
            {
                //Do your styling with 'this' object.
            }
        }
    );

Answer 2

Bellow is shown the example how to add custom classes in jQuery UI Dialog (Milestone 1.8), which is not stable yet:

$('#foo').dialog({

    'buttons' : {

        'cancel' : {

            priority: 'secondary', classes: 'foo bar baz', click: function() {

                ...

            },

        },

    }

});

You may use current development version at your own risk or try to play with These Patches. As for me, I have decided to wait until 1.8 would be released.

Answer 3

after looking at some other threads I came up with this solution to add icons to the buttons in a confirm dialog, which seems to work well in version 1.8.1 and can be modified to do other styling:

$("#confirmBox").dialog({
    modal:true,
    autoOpen:false,        
    buttons: { 
        "Save": function() { ... },                
        "Cancel": function() { ... }
        }
});

var buttons = $('.ui-dialog-buttonpane').children('button');
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon');

$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>");
$(buttons[1]).append("<span class='ui-icon ui-icon-close'></span>");

I'd be interested in seeing if there was a better way to do it, but this seems pretty efficient.

Answer 4

This function will add a class to every button in you dialog box. You can then style (or select with jQuery) as normal:

                $('.ui-dialog-buttonpane :button').each(function() { 
                    $(this).addClass($(this).text().replace(/\s/g,''));
                });

Answer 5

check out jquery ui 1.8.5 it's available here http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js and it has the new button for dialog ui implementation