Created
December 2, 2011 08:47
-
-
Save josher19/1422383 to your computer and use it in GitHub Desktop.
pretty
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 & 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"> </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 & 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"> </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment