Javascript 如何在没有按钮的情况下使用 jQuery UI 图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8027996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use jQuery UI icons without buttons?
提问by LA_
jQuery UI comes with some good icons. How can I use them without buttons? Let's say how to create link with plussign and to react on hover and click by changing icons? Hereis the demo just with icon added.
jQuery UI 带有一些不错的图标。我如何在没有按钮的情况下使用它们？让我们说如何创建带有加号的链接并通过更改图标对悬停和单击做出反应？ 这是添加了图标的演示。
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.
更新 1：悬停图标应将颜色从灰色更改为黑色（请在此处查看）。在我的演示中，它从一开始就是黑色的。
Upd 2:Here is almost what I need - http://jsfiddle.net/and7ey/gZQzt/6/- but without that background rectangle, I need just plus sign.
更新 2：这几乎是我需要的 - http://jsfiddle.net/and7ey/gZQzt/6/- 但没有那个背景矩形，我只需要加号。
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.
更新 3：看起来最好不要使用标准的 jQuery UI 样式，而是直接引用图像，但我不知道如何使用它。
Seems I need to define CSS like:
似乎我需要定义 CSS，如：
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png);
background-position: -32px -128px;
Positions can be easily found at jquery.ui.theme.cssfile. But how should I:
位置可以在jquery.ui.theme.css文件中轻松找到。但我应该如何：
- define correct background-image url?
- modify CSS to react on click, hover?
- 定义正确的背景图片网址？
- 修改 CSS 以响应单击、悬停？
采纳答案by LA_
Finally, I've decided just to use jQuery UI's image files - How to use one icon from different image files?:
最后，我决定只使用 jQuery UI 的图像文件 -如何使用不同图像文件中的一个图标？：
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;
}
回答by Kyle Trauberman
You can use the icons with any element by adding the ui-iconand the appropriate class for the icon you want to the element.
您可以将图标与任何元素一起使用，方法是为元素添加ui-icon所需图标的适当类。
<a href="#" class="ui-icon ui-icon-plusthick"></a>
If you want to add text to the link as well as an icon you'll need to set the icon on a separate element from the text. For example:
如果要向链接添加文本和图标，则需要将图标设置在与文本不同的元素上。例如：
<a href="#"><span class="ui-icon ui-icon-plusthick"></span><span>Text Here</span></a>
To change the icon on hover, you'll need to use some javascript. The following requires jQuery:
要更改悬停图标，您需要使用一些 javascript。以下需要jQuery：
$(".MySelector").hover(function() {
$(this).removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick");
}, function() {
$(this).removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");
});
回答by Smamatti
This is not "good", but at least this works. Please specify your question further, what should happen on click and hover.
这不是“好”，但至少这是有效的。请进一步说明您的问题，点击和悬停时会发生什么。
Sample
样本
HTML
HTML
<a href="#" class="img-link">
<span class="ui-icon ui-icon-plusthick" style="display:inline-block;"></span>
<span class="link-text">Link</span>
</a>
CSS
CSS
.img-link {
text-decoration: none;
}
.link-text {
text-decoration: underline;
}
回答by samura
Try this:
尝试这个：
<a>
<span class="ui-icon ui-icon-plusthick"></span>
</a>
and:
和：
$('a').hover(function(){$(this).toggleClass('ui-state-highlight')});
You can see it here: http://jsfiddle.net/gZQzt/4/
你可以在这里看到它：http: //jsfiddle.net/gZQzt/4/
回答by Durand
Since I can't reply to answers yet, here's what I did using Kyle Traubermann's code:
由于我还不能回复答案，以下是我使用 Kyle Traubermann 的代码所做的：
<div class="ui-state-default" style="background: none; border: none;"><span class="ui-icon ui-icon-circle-tick"></span></div>
Basically, you have to put the state in a separate div. This changes the image to the right colour but it also adds a border and gloss to it so I had to disable that with nones. You might need a color: none; in there as well.
基本上，您必须将状态放在单独的 div 中。这会将图像更改为正确的颜色，但它还会为其添加边框和光泽，因此我不得不使用 none 禁用它。您可能需要一种颜色：无；在那里。
There's probably a simpler way to do this but I don't really know much about CSS yet.
可能有一种更简单的方法可以做到这一点，但我对 CSS 还不太了解。
回答by Michal - wereda-net
UI icon as anchor (no text):
UI 图标作为锚点（无文本）：
Works for me:
对我有用：
<a href="http://wow.com"><span class="ui-state-default ui-corner-all ui-icon ui-icon-extlink"></span></a>
Relevant: order of ui class names.
相关：ui 类名的顺序。
