如何更改jquery对话框按钮答案

【问题标题】：how to change jquery dialog buttons如何更改jquery对话框按钮
【发布时间】：2012-01-25 07:58:49
【问题描述】：

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

按钮上不会覆盖任何文字。我正在使用 jquery 1.4.2 和 jquery-ui 1.8.1

【问题讨论】：

标签： javascript jquery css jquery-ui jquery-ui-dialog

【解决方案1】：

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

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

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

【讨论】：

这是对文本前面的讨厌的黑客攻击。此外，我的按钮图像会有所不同（一个对话框中有两个不同的按钮）
文本缩进位很常见。您可以为不同的按钮添加任意数量的 CSS 类。

【解决方案2】：

也许在对话框的打开事件中检索按钮并删除 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');
}

【讨论】：

有什么方法可以区分按钮？
您可以在按钮上放置文本并通过 $(buttons[i]).text() 访问它，然后在不需要时删除该文本。可能不是最好的解决方案，但可行。