jquery 对话框替换关闭按钮图标答案

【问题标题】：jquery dialog replace close button iconjquery 对话框替换关闭按钮图标
【发布时间】：2012-10-21 04:17:36
【问题描述】：

我想更改 jquery Dialog 中默认的关闭图标按钮。

我尝试在 jquery-ui-1.8.23.custom.css 中添加这个 css 类：

.ui-icon-myCloseButton { background-image: url(/path/image.png); }

在对话框定义中：

$('#documentsDialog').dialog({
   create: function(event,ui) {
           var widget = $(this).dialog("widget");
           $(".ui-dialog-titlebar-close span",widget).removeClass("ui-icon-closethick").addClass(".ui-icon-myCloseButton");

});

但没有运气，有什么想法吗？

【问题讨论】：

发现语法错误，从addClass(".ui-icon-myCloseButton"); 中删除. ：addClass("ui-icon-myCloseButton"); 它仍然会添加该类，但我相信它会像这样添加它：class=".ui-icon-myCloseButton" 而不是class="ui-icon-myCloseButton"
添加 '.'在 addClass() 方法中仍然没有解决问题。出现的图标是来自 custo Jquery CSS 主题的 ui-icons_888888_256*240.png 文件中的第一个
检查@Adrian 的回答。这只是我在寻找答案时发现的东西，Adrian 打败了我。

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

【解决方案1】：

你只是缺少一个右大括号：

$('#documentsDialog').dialog({
    create: function(event, ui) {
        var widget = $(this).dialog("widget");
        $(".ui-dialog-titlebar-close span", widget).removeClass("ui-icon-closethick").addClass("ui-icon-myCloseButton");
    }
});

但是，最重要的是，你的 css 类应该声明为：

.ui-icon.ui-icon-myCloseButton{
    background-image: url(https://www.goldbroker.com/pages/images/close.png);
}

问题是 .ui-icon 处的定义覆盖了您的自定义图像。当您使用上面的 css 重新定义时，它完全可以工作。

来，拉小提琴：http://jsfiddle.net/adrianonantua/FuWsK/2/

【讨论】：

对不起，我有括号，但我在远程机器上工作，不允许复制粘贴代码，然后我手动粘贴代码并忘记了括号。
我已将答案更新为完全可行的解决方案，请检查
我像上面一样声明了这个类，但没有任何反应。这是我的 css：“/* 图标 ----------------------------------/ / i> 状态和图像 / .ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); } .ui-icon .ui-icon-myCloseButton { 背景-image: url(images/quadrado_Fechar.png); } .ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); } ... / 定位 * / .ui-icon-myCloseButton { background-position: 0 0; } .ui-icon-carat-1-n { background-position: 0 0; } ..."
对文本格式感到抱歉，但我不知道如何在评论选项卡中正确处理文本
@BrunoMósca 你测试过小提琴吗？