CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
LA_
LA_

Reputation: 20409

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?

Upvotes: 11

Views: 37672

Answers (6)

Kyle Trauberman
Kyle Trauberman

Reputation: 25684

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

Upvotes: 9

Michal - wereda-net
Michal - wereda-net

Reputation: 959

UI icon as anchor (no text):

Works for me:

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

Relevant: order of ui class names.

Upvotes: 1

LA_
LA_

Reputation: 20409

Finally, I've decided just to use jQuery UI's image files - 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;
}

Upvotes: 1

Durand
Durand

Reputation: 887

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.

Upvotes: 2

samura
samura

Reputation: 4395

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/

Upvotes: 4

Smamatti
Smamatti

Reputation: 3931

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

Upvotes: 8

Related Questions