javascript - 如何在没有按钮的情况下使用 jQuery UI 图标？

Question

jQuery UI 带有一些不错的图标。我如何在没有按钮的情况下使用它们？假设如何创建带有 plus 符号的链接并通过更改图标对悬停和单击使用react？ Here是只加了图标的demo。

更新 1:悬停图标应将颜色从灰色更改为黑色(请参阅 here)。在我的演示中，它从一开始就是黑色的。

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

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

看来我需要像这样定义 CSS:

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

可以很容易地在 jquery.ui.theme.css 找到职位文件。但是我应该如何:

1. 定义正确的背景图像 url？
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");
});