对话框图标答案

【问题标题】：Dialog box icon对话框图标
【发布时间】：2011-07-10 17:57:45
【问题描述】：

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

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

但是，我似乎不知道如何自定义关闭图标。

有人知道怎么做吗？

我已经自定义了对话框的其他部分，但正在查看主题 api：

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

但是从那个链接，我不知道如何自定义关闭图标。

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

【问题讨论】：

你想通过什么方式自定义图标？
例如，创建我自己的关闭图标图像（我假设它是图像？），它有 2 个状态，就像默认图像一样。目前，与我的应用程序中手动构建的其他图标相比，它看起来不合适。

标签： jquery css jquery-ui jquery-ui-dialog jquery-ui-theme

【解决方案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/

【讨论】：

这与我所追求的非常接近。是否可以更改鼠标悬停效果？正如我最初认为这是图标的一部分，看起来我错了。

【解决方案2】：

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

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

文件被命名为：ui-icons_222222_256x240.png

并且可以在主题的images文件夹中找到

图像看起来像这样：

【讨论】：

【解决方案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>

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

【讨论】：

如果我有自己的精灵图标文件，如何将任何图像的默认状态应用为默认状态，然后在悬停状态下应用另一个？