Question

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

更新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文件中轻松找到职位。但我该怎么做：

定义正确的背景图片网址？
修改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

试试这个：

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

和

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

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

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禁用它。您可能需要一种颜色：无;在那里。

这可能是一种更简单的方法，但我还不太了解CSS。

Answer 5

最后，我决定只使用jQuery UI的图像文件 - How to use one icon from different image files?：

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

Answer 6

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

适合我：

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

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

6 个答案:

样品

HTML

CSS