jQuery UI Tutorial

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

jQuery UI Tutorial

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

  1. <!DOCTYPE html>  
  2. <head>  
  3.   <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  4.   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  5.   <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  6.   <style>  
  7.   #draggable { width: 100px; height: 100px; padding: 0.5em; background:#7fffd4;}  
  8.   </style>  
  9.   <script>  
  10.   $(function() {  
  11.     $( "#draggable" ).draggable();  
  12.   });  
  13.   </script>  
  14. </head>  
  15. <body>  
  16.      <div id="draggable" class="ui-widget-content">  
  17.       <p>I am draggable!</p>  
  18.      </div>  
  19. </body>  
  20. </html>  

Test it Now



Before learning jQuery UI, you must have the basic knowledge of JavaScript.


Our jQuery UI tutorial is designed to help beginners and professionals.


We assure that you will not find any problem in this jQuery UI tutorial. But if there is any mistake, please post the problem in contact form.