jQuery UI 带有一些很好的图标。
没有按钮我该如何使用它们？让我们说一下如何创建链接plus签名并通过更改图标对悬停和单击做出反应？Here http://jsfiddle.net/and7ey/gZQzt/是仅添加图标的演示。
Upd 1:悬停图标应将颜色从灰色更改为黑色（请参阅here http://jquery-ui.googlecode.com/svn/trunk/tests/static/icons.html）。在我的演示中，它从一开始就是黑色的。
Upd 2:这几乎就是我所需要的 -http://jsfiddle.net/and7ey/gZQzt/6/ http://jsfiddle.net/and7ey/gZQzt/6/- 但没有那个背景矩形，我只需要加号。
Upd 3:看起来最好不要使用标准 jQuery UI 样式，而是直接引用images http://jquery-ui.googlecode.com/svn/trunk/themes/base/images/，但我不知道如何使用它。
看来我需要像这样定义CSS：
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png);
background-position: -32px -128px;
职位可以很容易地找到jquery.ui.主题.css http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery.ui.theme.css文件。
但我该怎么办：
- 定义正确的背景图片 url？
- 修改 CSS 以对点击、悬停做出反应？
您可以通过添加以下内容将图标与任何元素一起使用ui-icon以及您想要元素的图标的相应类。
<a href="#" class="ui-icon ui-icon-plusthick"></a>
如果您想向链接添加文本以及图标，则需要将图标设置在与文本不同的元素上。例如：
<a href="#"><span class="ui-icon ui-icon-plusthick"></span><span>Text Here</span></a>
要更改悬停时的图标，您需要使用一些 JavaScript。以下需要 jQuery：
$(".MySelector").hover(function() {
$(this).removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick");
}, function() {
$(this).removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
