替换 JQueryUI 对话框的关闭图标答案

【问题标题】：Replacing the Close icon for a JQueryUI Dialog box替换 JQueryUI 对话框的关闭图标
【发布时间】：2011-12-16 02:05:09
【问题描述】：

在对该主题进行广泛搜索后，我无法找到答案，因此希望有人可以帮助我解决这个问题。我有一个比较基础的对话框：

$("#dialog-search").dialog({
    resizable: false,
    height:dimensionData.height,
    width: dimensionData.width,
    modal: true,
    title: dimensionData.title,
    position: [x,y],
    open: function() {
        $("#dialog-search .dateField").blur();
    },
    close: function(event, ui){
       callBack(event,ui);
    }
});

我想要做的是用 ui 提供的不同图标 (ui-icon-minus) 替换 X 图标 (ui-icon-close)，以便单击减号图标关闭对话框。我已经看到有关如何在 css 中隐藏图标或将其替换为自定义图像的帖子，但我还没有找到将图标替换为另一个图标以执行相同功能的方法。

编辑：我还希望能够通过添加自定义行为/位置来在我的对话框中使用 ui-icon-close 来实现不同的功能，但这可能超出了这个问题的范围。不过，如果这是一个相关的解决方案，请随意解决这个问题。

【问题讨论】：

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

【解决方案1】：

尝试查看对话框的结构，应该不难做到。

http://jqueryui.com/demos/dialog/#theming

使用create 事件将关闭按钮图标的类更改为另一个图标的类即可。

http://jsfiddle.net/Quincy/kHU2M/1/

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

【讨论】：

谢谢，我去看看。令人沮丧的是 javascript 如此迟钝，以至于您必须删除并添加一个 Class 才能完成简单的图像替换。
但是如何添加自己的图像？仅仅创建一个使用 background-image:... 的 CSS 类并没有真正起作用，它只会把整个事情搞砸。是否有将 X 与其他东西完全交换的教程，而不是“内置”图像之一？最好更大。
@Ted 我已经添加了一个自定义图像的答案。

【解决方案2】：

老问题，但也许我会帮助某人。关注CSS 为我成功了，完全自定义Close 按钮用户界面。不是很优雅:)，但对我来说很好。

.ui-icon-closethick {
    background-image: url(images/my-10px-image.png) !important;
    background-position: left top !important;
    margin: 0 !important;
}

.ui-dialog .ui-dialog-titlebar-close, .ui-icon-closethick {
    width: 10px !important;
    height: 10px !important;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: none !important;
    border: none !important;
}

.ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar-close:hover {
    padding: 0 !important;
}

我的自定义关闭按钮如下所示：

【讨论】：