替换JQueryUI对话框的“关闭”图标 [英] Replacing the Close icon for a JQueryUI Dialog box

问题描述

经过广泛搜索这个主题后，我找不到答案，所以希望有人可以帮我解决这个问题。我有一个相对基本的对话框：

After extensive searching on this topic, I haven't been able to find an answer, so hopefully someone can help me with this issue. I have a relatively basic dialog box:

$("#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中的自定义图像替换它的帖子，但我还没有找到用另一个图标替换图标来执行相同功能的方法。

What I want to do is replace the X icon (ui-icon-close) with a different icon provided by the ui (ui-icon-minus), so that clicking the minus icon closes the dialog instead. I've seen posts on how to hide the icon or replace it with a custom image in css, but I haven't yet found a way to replace the icon with another icon to perform the same functionality.

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

I also want to be able to use ui-icon-close for a different functionality in my dialog box by adding a custom behavior/location, but that may be outside the scope for this question. Feel free to address this if it's a related solution, though.

推荐答案

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

Try to see the structure of the dialog and it should not be hard to do it.

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

使用创建事件来更改另一个图标类的关闭按钮图标类将会这样做。

Use the create event to change the class of the close button icon to class of another icon will do.

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

这篇关于替换JQueryUI对话框的“关闭”图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！