Home › jQuery UI icons example

jQuery UI icons example 

James
Joined:
02/21/2009
Posts:
130

July 06, 2010 15:27:28    Last update: January 11, 2011 20:20:03
This example shows three jQuery icons with hover effects.

  • Code
  • Demo
<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Icons</title>

	<link rel="stylesheet" type="text/css" media="all"
		href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-darkness/jquery-ui.css"/>

	<script type="text/javascript" 
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
	</script>

	<script type="text/javascript" 
		src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js">
	</script>

	<style type="text/css">
	ul#icons li {
		cursor: pointer;
		float: left;
		list-style: none outside none;
		margin: 2px;
		padding: 4px;
		position: relative;
	}
	</style>

	<script type="text/javascript">
	$(function() {
		$("#icons li")
		.mouseenter(function() {
			$(this).addClass('ui-state-hover');
		})
		.mouseleave(function() {
			$(this).removeClass("ui-state-hover");
		});
	});
	</script>
</head>

<body>
	<div id="theContainer">
	<ul id="icons">
		<li class="ui-state-default ui-corner-all" title="Info">
			<span class="ui-icon ui-icon-info"></span>
		</li>

		<li class="ui-state-default ui-corner-all" title="Upload">
			<span class="ui-icon ui-icon-circle-arrow-n"></span>
		</li>

		<li class="ui-state-default ui-corner-all" title="Delete">
			<span class="ui-icon ui-icon-circle-close"></span>
		</li>
	</ul>
	</div>
</body>
</html>


Hint: mouseover an icon on the ThemeRoller page to get the CSS classname.
Share |
| Comment  | Tags