替换JQueryUI对话框的关闭图标

经过对此主题的大量搜索后，我无法找到答案，所以希望有人能够帮助解决此问题。我有一个比较基本的对话框：替换JQueryUI对话框的关闭图标

$("#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图标减）提供不同的图标替换X图标（UI图标关闭），使点击减号图标关闭对话框。我已经看过有关如何隐藏图标或将其替换为css中的自定义图像的文章，但我还没有找到一种方法来将图标替换为另一个图标来执行相同的功能。

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

来源

2011-10-26 Axle

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

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

来源

2011-10-27 01:34:55 Quincy

谢谢，我会检查了这一点。 JavaScript非常令人沮丧，您必须删除并添加一个类才能完成简单的图像替换。 – Axle

但是，如何添加我自己的图像？要创建一个使用背景图像的CSS类：...并不真正起作用，它只会把整个事情弄糟。是否有教程用于完全交换X，而不是“内置”图像之一？而且比较大。 – Ted

@Ted我已经添加了一个自定义图像的答案。 – udalmik

老问题，但也许我会帮助别人。以下为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; 
}

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

来源

2013-03-04 14:56:22 udalmik

替换JQueryUI对话框的关闭图标

回答

相关问题