Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use jQuery UI icons without buttons?

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:

  1. define correct background-image url?
  2. modify CSS to react on click, hover?
like image 517
LA_ Avatar asked Nov 06 '11 15:11

LA_


Video Answer


4 Answers

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");
});
like image 157
Kyle Trauberman Avatar answered Oct 26 '22 03:10

Kyle Trauberman


This is not "good", but at least this works. Please specify your question further, what should happen on click and hover.

Sample

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;
}
like image 35
Smamatti Avatar answered Oct 26 '22 02:10

Smamatti


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/

like image 33
samura Avatar answered Oct 26 '22 03:10

samura


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.

like image 2
Durand Avatar answered Oct 26 '22 02:10

Durand