对话框图标

发布于 2024-11-19 10:26:10 字数 396 浏览 5 评论 0原文

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

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

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

有谁知道该怎么做?

我已经自定义了对话框的其他部分,但查看了主题 api:

http://jqueryui.com/docs/主题/API

但从该链接中,我无法弄清楚如何自定义关闭图标。

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

I have the following script where I have been trying to customise the look and feel of the dialog box:

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

However, I can't seem to figure out how to customise the close icon.

Does anyone know how to do that?

I have customised other parts of the dialog but looking at the theme api:

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

But from that link, I can't figure out how to customise the close icon.

So basically, I want to replace the existing 2 state image, with my own 2 state image sprite file.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

几度春秋 2024-11-26 10:26:10

使用这个 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/

Use this 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;
}

Example, I swapped out the X for a new image: http://jsfiddle.net/AlienWebguy/7CvZ9/22/

夏尔 2024-11-26 10:26:10

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

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

这些文件的命名类似于:ui-icons_222222_256x240.png

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

图像看起来类似于:

在此处输入图像描述

A jQuery ui theme contains sprite images of all the icons grouped together and organzined in the same file.

You can change the icons in your customized theme file.

the files are named something like: ui-icons_222222_256x240.png

and can be foudn in the images folder of the theme

the image looks something like that:

enter image description here

離殇 2024-11-26 10:26:10

关闭图标涉及的类是:

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

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

The class involved in the close icon are:

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

This is the generated markup

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

i think you should override those two classes to change the way the button looks

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文