Post
Ask Question

Overview Of jQuery UI

In this article we will learn jQueryUI. This is the first part of this article series. UI stand for User interface and it's used for creating user-interactive applications using jquery and Html.

Prerequisites

Basic Knowledge of:

  • HTML
  • Javascript
  • Css

In this part we are going to learn about these jQuery UI methods: 

  • Draggable
  • Resizable
  • Sortable 
Open Visual Studio and create a new project --  rename it as jQuery and download the required Jquery reference file from the Jquery Website or Nuget package manager and add the reference of the jquery file into the page's head section
  1. <script src="Scripts/jquery-1.10.2.js"></script>  
  2. <script src="Scripts/jquery-ui.js"></script>  
  3. <link href="Scripts/jquery-ui.css" rel="stylesheet" />  

Now first we will learn the draggable method.

Draggable
 
This method is used to create a draggable component in our application.

Add 3 divs for a demo of the draggable method and add a style to these divs.

Add Css in head section
  1. .div1{  
  2.            height:160px;  
  3.            width:80px;  
  4.            border:1px solid Blue;  
  5.            background-color:orange  
  6.        }   

 Add these divs in the body section of our page

  1. <div>  
  2.        <div id="dvi1" class="div1">  
  3.            <h5 style="text-align:center">Div1</h5>  
  4.        </div>  
  5.        <div id="dvi2" class="div1">  
  6.            <h5 style="text-align:center">Div2</h5>  
  7.        </div>  
  8.        <div id="dvi3" class="div1">  
  9.            <h5 style="text-align:center">Div3</h5>  
  10.        </div>  
  11.    </div>  

Now add the following code in script tag in head section to make it draggable to these divs.

  1. <script>  
  2.         $(document).ready(function () {  
  3.              $("#dvi1,#dvi2,#dvi3").draggable();  
  4.         });  
  5.     </script>  
Check the complete code for the draggable method.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <script src="Scripts/jquery-1.10.2.js"></script>  
  7.     <script src="Scripts/jquery-ui.js"></script>  
  8.     <link href="Scripts/jquery-ui.css" rel="stylesheet" />  
  9.     <script>  
  10.         $(document).ready(function () {  
  11.             $("#dvi1,#dvi2,#dvi3").draggable();  
  12.         });  
  13.     </script>  
  14.     <style>  
  15.         .div1 {  
  16.             height: 160px;  
  17.             width: 80px;  
  18.             border: 1px solid Blue;  
  19.             background-color: orange;  
  20.         }  
  21.     </style>  
  22. </head>  
  23. <body>  
  24.     <div>  
  25.         <div id="dvi1" class="div1">  
  26.             <h5 style="text-align:center">Div1</h5>  
  27.         </div>  
  28.         <div id="dvi2" class="div1">  
  29.             <h5 style="text-align:center">Div2</h5>  
  30.         </div>  
  31.         <div id="dvi3" class="div1">  
  32.             <h5 style="text-align:center">Div3</h5>  
  33.         </div>  
  34.     </div>  
  35. </body>  
  36. </html>  

Run the project and check the draggable div. We can see the divs are draggable.

 

Sortable 

We can rearrange elements using the Sortable method. Check out this demo to see sortable components.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     
  5.     <script src="Scripts/jquery-1.10.2.js"></script>  
  6.     <script src="Scripts/jquery-ui.js"></script>  
  7.     <link href="Scripts/jquery-ui.css" rel="stylesheet" />  
  8.     <script>  
  9.        $(document).ready(function () {  
  10.             $("#s1").sortable();  
  11.         });  
  12.     </script>  
  13.     <style>  
  14.         .d1{  
  15.           border:4px solid blue;  
  16.           padding:20px;width:50px;margin:10px;  
  17.             
  18.         }  
  19.     </style>  
  20. </head>  
  21. <body>  
  22.     <div id="s1">  
  23.         <div class="d1">Jaipur</div>  
  24.         <div class="d1">Delhi</div>  
  25.         <div class="d1">Noida</div>  
  26.         <div class="d1">Gurgaon</div>  
  27.         <div class="d1">Ajmer</div>  
  28.   
  29.     </div>  
  30.   
  31. </body>  
  32. </html>    
Run the Project and check the result,
 
 
 
Click on  any city and drag it from its place and  drop it in another place 
 
Resizable
 
By using this method we can resize an element's size
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <script src="Scripts/jquery-1.10.2.js"></script>  
  7.     <script src="Scripts/jquery-ui.js"></script>  
  8.     <link href="Scripts/jquery-ui.css" rel="stylesheet" />  
  9.     <script>  
  10.         $(document).ready(function () {  
  11.             $("#dvi1,#dvi2").resizable();  
  12.         });  
  13.     </script>  
  14.     <style>  
  15.         .div1 {  
  16.             height: 160px;  
  17.             width: 80px;  
  18.             border: 1px solid Blue;  
  19.             background-color: orange;  
  20.             margin:10px;  
  21.         }  
  22.     </style>  
  23. </head>  
  24. <body>  
  25.     <div>  
  26.         <div id="dvi1" class="div1">  
  27.             <h5 style="text-align:center">Div1</h5>  
  28.         </div>  
  29.         <div id="dvi2" class="div1">  
  30.             <h5 style="text-align:center">Div2</h5>  
  31.         </div>  
  32.        
  33.     </div>  
  34. </body>  
  35. </html>  

 Run the project and check the browser.

We can resize the div according to our requirement.
 
Summary
 
In this article we we learned about the jQuery UI methods of  draggable, resizable and sortable. Jquery UI plugin is very effective for making a user interface interactive.
Next Recommended Reading Create Year Picker Widget From jQuery-UI Date Picker