jQuery UI comes with some good icons. How can I use them without buttons? Let's say how to create link with plus sign and to react on hover and click by changing icons? Here is the demo just with icon added.
Upd 1: On hover icon should change the color from grey to black (please see it here). In my demo it is black from the beginning.
Upd 2: Here is almost what I need - http://jsfiddle.net/and7ey/gZQzt/6/ - but without that background rectangle, I need just plus sign.
Upd 3: Looks like it would be better not to use standard jQuery UI styles, but to refer directly to the images, but I don't know how use it.
Seems I need to define CSS like:
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png);
background-position: -32px -128px;
Positions can be easily found at jquery.ui.theme.css file. But how should I:
You can use the icons with any element by adding the ui-icon
and the appropriate class for the icon you want to the element.
<a href="#" class="ui-icon ui-icon-plusthick"></a>
If you want to add text to the link as well as an icon you'll need to set the icon on a separate element from the text. For example:
<a href="#"><span class="ui-icon ui-icon-plusthick"></span><span>Text Here</span></a>
To change the icon on hover, you'll need to use some javascript. The following requires jQuery:
$(".MySelector").hover(function() {
$(this).removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick");
}, function() {
$(this).removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");
});
This is not "good", but at least this works. Please specify your question further, what should happen on click and hover.
http://jsfiddle.net/gZQzt/2/
<a href="#" class="img-link">
<span class="ui-icon ui-icon-plusthick" style="display:inline-block;"></span>
<span class="link-text">Link</span>
</a>
.img-link {
text-decoration: none;
}
.link-text {
text-decoration: underline;
}
Try this:
<a>
<span class="ui-icon ui-icon-plusthick"></span>
</a>
and:
$('a').hover(function(){$(this).toggleClass('ui-state-highlight')});
You can see it here: http://jsfiddle.net/gZQzt/4/
Since I can't reply to answers yet, here's what I did using Kyle Traubermann's code:
<div class="ui-state-default" style="background: none; border: none;"><span class="ui-icon ui-icon-circle-tick"></span></div>
Basically, you have to put the state in a separate div. This changes the image to the right colour but it also adds a border and gloss to it so I had to disable that with nones. You might need a color: none; in there as well.
There's probably a simpler way to do this but I don't really know much about CSS yet.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With