CODEWITHSUNDEEP
javascriptjquerycssjquery-uijquery-ui-dialog
Mark W
Mark W

Reputation: 5964

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

Upvotes: 2

Views: 1894

Answers (2)

Chad Ferguson
Chad Ferguson

Reputation: 3091

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');
}

Upvotes: 2

PartialOrder
PartialOrder

Reputation: 2960

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;
    ...
    ...
}

Upvotes: 3

Related Questions