2

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

Mark W
  • 5,824
  • 15
  • 59
  • 97

2 Answers2

3

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;
    ...
    ...
}
PartialOrder
  • 2,870
  • 3
  • 36
  • 44
  • that's a nasty hack on the text front. Also, my button images will be different (two different buttons in one dialog) – Mark W Dec 21 '11 at 14:14
  • The text-indent bit is quite common. And you can add as many CSS classes as you like for different buttons. – PartialOrder Dec 21 '11 at 15:43
2

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');
}
DisplayName
  • 3,093
  • 5
  • 35
  • 42
  • any way to differentiate between the buttons? – Mark W Dec 21 '11 at 14:39
  • you could have text on the button and access it via $(buttons[i]).text() and then remove that text if it is not needed. Probably not the best solution but doable. – DisplayName Dec 21 '11 at 14:44