First of all, JQuery is total awesomeness. 'nuff said.
Using the icons is not as straightforward as you might think. Basically to use an icon on a page, you need to have the CSS included. Google hosts the themes so you can link to these to save your bandwidth, which is nice. For example if you wanted to use the 'darkness' theme, you need to add this to the <head> part of your page:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />
The themes contain a lot of nice icons. You can see all of the themes and icons at the JQuery UI Themeroller. To see the class of an icon on the page, simpy mouse over it.
To add an icon on a page (a trashcan in this example), you need to add a <span> element as follows:
<span class="ui-icon ui-icon-trash ui-state-default" title="Whatever mouseover text you want"></span>
This creates the icon surrounded by a rectangle. If you want to use a different icon, simply replace the 'ui-icon-trash' class with the class of the icon you want. If you do not wish to see the rectangle surrounding it, remove the 'ui-state-default' class from it.
First thing you need to know that the icons are block level elements. That means any text or elements following the icon will be placed on a newline. To counter this, you can either place the icon and the following text/whatnot in a table in separate cells, or add an inline float style to the <span>:
<span class="ui-icon ui-icon-trash ui-state-default" title="Whatever mouseover text you want" style="float:left;"></span>
Make it a link
To make the icon act as a link, you need to bind it to a click event with JQuery. Include the JQuery libs (again from Google) in your header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
Now, place the following code to your page's header:
<script type="text/javascript">
$(function() {
$('.makeMeALink').click(function() {
document.location.href = 'someUrl';
});
}
</script>
Here we bind the 'makeMeALink' selector to a click event, and make it open the URL 'someUrl' in the current browser window. Replace 'someUrl' with the address you want the link to point to. Now, add the 'makeMeALink' selector to the icon as a class and the icon will function like a link:
<span class="ui-icon ui-icon-trash ui-state-default makeMeALink" title="Whatever mouseover text you want" style="float:left;"></span>
Why do we do it like this, and not just wrap the <span> element in a link tag ? Sure, we could do this also:
<a href="someurl"><span class="ui-icon ui-icon-trash ui-state-default" title="Whatever mouseover text you want" style="float:left;"></span></a>
It pretty much does the same thing, but in case you wanted to reuse the click binding on some other element, or expand the functionality to for example showing a modal confirmation dialog, you need to use the click event binding.
Make it appear as a link
The thing is that users won't actually realize its a link, as putting the cursor over it still shows the default cursor, and the icon does not animate/highhlight or the such to indicate its clickable. We can use JQuery to bind a mouseover event to 'highlight' the icon and change the cursor. Modify the JQuery in the header to look as follows:
<script type="text/javascript">
$(function() {
$('.makeMeALink').click(function() {
document.location.href = 'someUrl';
});
$('.hoverAnimation').hover(function() {
$(this).addClass('ui-state-hover');
}, function() {
$(this).removeClass('ui-state-hover');
});
$('.changeCursor').hover(function() {
$(this).css('cursor', 'pointer');
});
}
</script>
Basically, we define two hover bindings for the 'hoverAnimation' and 'changeCursor' selectors. The 'hoverAnimation' selector when placed on an element will add the 'ui-state-hover' CSS class to the element when the user puts his/her mouse over it, and removes the class when the mouse moves outside the element. The 'ui-state-hover' class is built in to the JQuery UI themes and will work with any theme.
The 'changeCursor' binding will change the cursor to a pointer when the mouse is placed over the icon, the same way it does when you place your mouse over a link.
Now, add these two selectors to the icon:
<span class="ui-icon ui-icon-trash ui-state-default makeMeALink hoverAnimation changeCursor" title="Whatever mouseover text you want" style="float:left;"></span>
Now you have an icon that acts as a link, changes cursor like a link, and when pointed with a mouse will be highlighted.
No comments:
Post a Comment