对话框图标

Question

我有以下脚本，我一直在尝试自定义对话框的外观：

http://jsfiddle.net/7CvZ9/18/

但是，我似乎无法弄清楚如何自定义关闭图标。

有谁知道怎么做？

我已经定制了对话框的其他部分但是看了主题api：

http://jqueryui.com/docs/Theming/API

但是从那个链接，我无法弄清楚如何自定义关闭图标。

所以基本上，我想用我自己的2状态图像精灵文件替换现有的2状态图像。

Answer 1

使用此CSS：

.ui-dialog-titlebar-close {
    /* Default image */
    background-image:url('http://www.charlottemotorspeedway.com/images/icon_x.png');
}

.ui-dialog-titlebar-close:hover,
.ui-dialog-titlebar-close:focus {
    background-color:transparent !important;
    border:none !important;
    /* Hover state image */
    background-image:url('http://www.charlottemotorspeedway.com/images/icon_x.png') !important;
}

示例，我换了X换新图像：http://jsfiddle.net/AlienWebguy/7CvZ9/22/

Answer 2

jQuery ui主题包含组合在一起并在同一文件中组织的所有图标的精灵图像。

您可以更改自定义主题文件中的图标。

这些文件的名称类似于：ui-icons_222222_256x240.png

并且可以在主题的images文件夹中显示

图像看起来像那样：

Answer 3

关闭图标中涉及的类是：

.ui-dialog-titlebar-close 
.ui-icon-closethick

这是生成的标记

<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
<span class="ui-icon ui-icon-closethick">close</span>
</a>

我认为你应该覆盖这两个类来改变按钮的外观