Learn jQuery UI Tutorial

jQuery UI tutorial for beginners and professionals provides deep knowledge of jQuery UI interactions, widgets, effects and utilities.

What is jQuery UI

Good for highly interactive web applications
Open source and free to use
Powerful theme mechanism
Stable and maintenance friendly
Extensive browser support

jQuery UI Example

In this tutorial, you will get a lot of jQuery UI examples to understand the topic well. Let's see a simple jQuery UI example.

File: jqueryuidraggable1.html

<!DOCTYPE html>
<head>
  <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; background:#7fffd4;}
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>
     <div id="draggable" class="ui-widget-content">
	  <p>I am draggable!</p>
     </div>
</body>
</html>

Test it Now