css - 替换 JQueryUI 对话框的关闭图标

Question

在对这个主题进行了大量搜索之后，我还没有找到答案，所以希望有人能帮助我解决这个问题。我有一个相对基本的对话框:

$("#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);
    }
});

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

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

Answer 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");
   }
});