如何使用没有按钮的jQuery UI图标？

Question

jQuery UI带有一些好的图标.如何在没有按钮的情况下使用它们？让我们说如何创建带加号的链接,并通过更改图标对悬停和点击做出反应？ 这是添加了图标的演示.

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

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

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

似乎我需要定义CSS,如:

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

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

1. 定义正确的背景图像网址？
2. 修改CSS以对点击做出反应,悬停？

Answer 1

通过为元素添加所需图标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");
});

Answer 2

这不是"好",但至少这是有效的.请进一步说明您的问题,点击和悬停时会发生什么.

样品

http://jsfiddle.net/gZQzt/2/

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

.img-link {
    text-decoration: none;
}

.link-text {
    text-decoration: underline;
}

Answer 3

最后，我决定只使用 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;
}