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

Question

jQuery UI带有一些不错的图标。 如何在没有按钮的情况下使用它们？比如说如何创建带有加号符号的链接，并通过悬停和点击改变图标来响应呢？ 这里是只添加图标的演示。

更新 1: 悬停时，图标应该从灰色变成黑色（请在这里查看）。在我的演示中，它从一开始就是黑色。

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

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

似乎我需要定义类似于：

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以响应单击、悬停事件？

- LA_

---

你能更明确你的问题吗？你已经使用了正确的类等，所以我猜在这里引用CSS的a:hover{...}是不必要的。 - Smamatti

更新了我的答案，使其在悬停时有响应。 - samura

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");
});

- Kyle Trauberman

---

显然你没有测试过。ui-icon设置了一个固定的宽度，所以除非你使用额外的CSS规则来设置宽度，否则无法设置任何链接文本。 - Smamatti

我现在看到了你帖子中的悬停要求，但当我回答这个问题时它并不存在。请查看我的编辑。 - Kyle Trauberman

谢谢，@Kyle。但是它仍然不能正常工作-http://jsfiddle.net/and7ey/gZQzt/5/ - 首先，图标没有改回来。其次，使用了错误的图标（如何提取与标准jquery按钮一起使用的灰色加号图标？）。 - LA_

叹气，Kyle，在清醒的前10分钟内不要回答。抱歉，那是一个不完整的JS片段。我编辑了答案来修复它。现在，当你将鼠标移开按钮时，它应该恢复图标。要更改要显示的图标，请使用其他图标类替换类。我在我的示例中使用了plusthick和minusthick，但您可以使用其他的。 - Kyle Trauberman

这是所有可用图标的列表：http://www.petefreitag.com/cheatsheets/jqueryui-icons/ - Kyle Trauberman

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;
}

- Smamatti

Answer 3

试试这个：

<a>
  <span class="ui-icon ui-icon-plusthick"></span>
</a>

并且：

$('a').hover(function(){$(this).toggleClass('ui-state-highlight')});

您可以在此处查看：http://jsfiddle.net/gZQzt/4/

- samura

---

我已经在最新版本的FF中进行了测试 - 当鼠标悬停在该图标上时，它会不断刷新（甚至正常符号附近会显示一些蓝色加号） - 这肯定不是我想要的。 - LA_

Answer 4

由于我现在还不能回答问题，所以这是我使用Kyle Traubermann的代码所做的:

<div class="ui-state-default" style="background: none; border: none;"><span class="ui-icon ui-icon-circle-tick"></span></div>

基本上，您需要将状态放在单独的div中。这会更改图像为正确的颜色，但它也会添加边框和光泽，因此我必须使用nones禁用它。您可能还需要在其中添加color: none;。

可能有一种更简单的方法来做到这一点，但我还不太了解CSS。

- Durand

---

我不知道jsfiddle在做什么，但你也需要包含CSS：http://durand1.co.cc/dump/jqueryui_icons/icons.html我还犯了一个错误。图标叫做check而不是tick，但其余的代码应该是正确的。 - Durand

Answer 5

UI图标作为锚点（无文本）：

对我来说没问题：

<a href="http://wow.com"><span class="ui-state-default ui-corner-all ui-icon ui-icon-extlink"></span></a>

相关：UI类名的顺序。

- Michal - wereda-net

Answer 6

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

- LA_