替换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);
    }
});

我想要做的是用ui(ui-icon-minus)提供的不同图标替换X图标(ui-icon-close),这样点击减号图标就会关闭对话框.我已经看过有关如何隐藏图标或用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");
   }
});

Answer 2

老问题,但也许我会帮助别人.以下CSS为我制作了诀窍,完全是自定义Close按钮UI.不是很优雅:),但对我来说工作正常.

.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;
}

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