how to change jquery dialog buttons

问题

I would like to replace the jquery dialog's buttons with images of my own buttons. What is the tidiest way of doing this?

There will be no text overlayed on the buttons. I am using jquery 1.4.2 and jquery-ui 1.8.1

回答1:

Maybe in the open event of the dialog retrieve the buttons and remove the ui-button classes and add your own.

var buttons = $(dialog_selector + ' .ui-dialog-buttonpane button');
for (var i = 0; i < buttons.length; ++i) {
    $(buttons[i]).removeClass('ui-button-text-only').removeClass('ui-button'.addClass('yourclass');
}

回答2:

Don't apply CSS selectors used by jQuery UI.

Use CSS text-indent with a large value to move text out of the viewport and use CSS background to set the image (and rollover), e.g.

.button {
    text-indent: -9999px;
    background: transparent url ('/path/to/button/image.png') no-repeat left top;
    ...
    ...
}

来源：https://stackoverflow.com/questions/8590965/how-to-change-jquery-dialog-buttons