如何使用不带按钮的jQuery UI图标? [英] How to use jQuery UI icons without buttons?

问题描述

jQuery UI带有一些不错的图标. 如何不使用按钮使用它们?假设如何创建带有 plus 符号的链接，以及如何通过更改图标对悬停和点击做出反应? 此处是仅添加了图标的演示.

jQuery UI comes with some good icons. How can I use them without buttons? Let's say how to create link with plus sign and to react on hover and click by changing icons? Here is the demo just with icon added.

更新1: 悬停图标应将颜色从灰色更改为黑色(请在此处查看) ).在我的演示中，它从一开始就是黑色的.

Upd 1: On hover icon should change the color from grey to black (please see it here). In my demo it is black from the beginning.

更新2: 这几乎是我需要的- http://jsfiddle.net/and7ey/gZQzt/6/-但是没有背景矩形，我只需要加号即可.

Upd 2: Here is almost what I need - http://jsfiddle.net/and7ey/gZQzt/6/ - but without that background rectangle, I need just plus sign.

更新3: 看起来最好不要使用标准的jQuery UI样式，而应直接引用图像，但我不知道如何使用.

Upd 3: Looks like it would be better not to use standard jQuery UI styles, but to refer directly to the images, but I don't know how use it.

似乎我需要定义CSS，例如:

Seems I need to define CSS like:

width: 16px; 
height: 16px; 
background-image: url(images/ui-icons_222222_256x240.png);
background-position: -32px -128px;

可以轻松地在 jquery.ui中找到位置.theme.css 文件. 但是我应该怎么做:

Positions can be easily found at jquery.ui.theme.css file. But how should I:

1. 定义正确的背景图片网址?
2. 修改CSS以对点击，悬停做出反应吗?

推荐答案

最后，我决定只使用jQuery UI的图像文件-

Finally, I've decided just to use jQuery UI's image files - How to use one icon from different image files?:

a:link,a:visited { /* for regular non-hovered, non-active link styles */
    width: 16px;  
    height: 16px;
    background-image:
    url(images/defaultStateImage.png); 
    background-position: -32px -128px;
}

a:hover { /* for hover/mouse-over styles */
    url(images/hoverStateImage.png); 
    background-position: -32px -128px;
}

a:active { /* for click/mouse-down state styles */
    url(images/clickStateImage.png); 
    background-position: -32px -128px;
}

这篇关于如何使用不带按钮的jQuery UI图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！