如何更改jquery对话框按钮

Question

我想用我自己按钮的图像替换jquery对话框的按钮。这样做最干净的方法是什么？

按钮上不会叠加文字。我正在使用jquery 1.4.2和jquery-ui 1.8.1

Answer 1

不要应用jQuery UI使用的CSS选择器。

使用具有较大值的CSS text-indent将文本移出视口并使用CSS背景设置图像（和翻转），例如。

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

Answer 2

也许在对话框的open事件中检索按钮并删除ui-button类并添加自己的类。

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