Skip to content

Instantly share code, notes, and snippets.

@josher19

josher19/ui-icons.html

Created December 2, 2011 08:47
Show Gist options
  • Save josher19/1422383 to your computer and use it in GitHub Desktop.
Save josher19/1422383 to your computer and use it in GitHub Desktop.
Download ZIP
pretty
Raw
ui-icons.html
<!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-lightness/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, ul.icons li {
cursor: pointer;
float: left;
list-style: none outside none;
margin: 3px;
padding: 4px;
xposition: relative;
xborder: 1px solid black;
}
div.item {
xborder: 1px solid green;
margin: 0px;
padding: 5px;
}
</style>
<script type="text/javascript">
$(function() {
$("#icons li,ul.icons li")
.mouseenter(function() {
$(this).addClass('ui-state-hover');
})
.mouseleave(function() {
$(this).removeClass("ui-state-hover");
})
.click(function() {
$('#infobar').text($(this).html());
});
$('.sortable').sortable({ axis: 'y' });
});
</script>
</head>
<body>
<div class="sortable">
<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="Drag &amp; Drop">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
</li>
<li class="ui-state-default ui-corner-all" title="Delete">
<span class="ui-icon ui-icon-circle-close"></span>
</li>
</ul>
<div class="ui-state-default item infobar">&nbsp;</div>
</div>
<div id="theContainer2">
<ul class="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="Drag &amp; Drop">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
</li>
<li class="ui-state-default ui-corner-all" title="Delete">
<span class="ui-icon ui-icon-circle-close"></span>
</li>
</ul>
<div class="ui-state-default ui-corner-all item" id="infobar">&nbsp;</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment