Getting Started With jQuery UI Plugin

Getting Started with jQuery UI

JQuery UI enable our applications to have a cool user interface and animation in a faster way. It is the set of plug-ins that include interface interactions, effects, animations, widgets and themes built on the JavaScript Library. JQuery is used to create cohesive and consistent APIs. It is a method that we can use to extend jQuery prototype objects. By that prototype object you can enable all jQuery objects to inherit any method that you add.


We can use interactions for basic mouse-based behaviours to any element. Few examples of Interactions are the following:
  • Draggable
  • Droppable
  • Resizable
  • Selectable
  • Sortable

Draggable: We can use this method for dragging and dropping elements around horizontally, around vertically and around all others.

Example: We need to add jQuery UI plugin in scripts folder of our project. And then use both the .js and ui.js scripts in our head section.

My Scripts section

  1. <script src="Scripts/jquery-2.1.4.js"></script>    
  2. <script src="Scripts/jquery-ui-1.11.4.js"></script>    
  3. <script type="text/javascript">    
  4. $(function() {    
  5.     $("#mydemo").draggable(); //Around all    
  6.     $("#x-axis").draggable({    
  7.         axis: "x"    
  8.     }) // move only arround x-axis    
  9.     $("#y-axis").draggable({    
  10.         axis: "y"    
  11.     }) // move only arround y-axis    
  12. });    
  13. </script>  
CSS Section
  1. #mydemo {  
  2.   width100px;  
  3.   height100px;  
  4.   padding0px;  
  5.   background-colorred;  
  6.   margin-left50%;  
  7. }  

Body Section 

  1. <form id="form1" runat="server">  
  2.     <div id="mydemo" class="ui-widget-content">  
  3.         <p style="color:white; margin:auto">Drag me around</p>  
  4.     </div>  
  5.     <div id="x-axis" style="width: 200px; margin-left:50%; height: 100px; padding:0px; background-color:lightblue" class="ui-widget-content">  
  6.         <p style="color:white; margin:auto">Drag me around x-axis only</p>  
  7.     </div>  
  8.     <div id="y-axis" style="width: 100px; height: 100px; margin-left:50%; padding:0px; background-color:lightgreen" class="ui-widget-content">  
  9.         <p style="color:white; margin:auto">Drag me around y-axis only</p>  
  10.     </div>  
  11. </form>  


                           Figure : Image before dragging 
                                          Figure : Image after dragging
Droppable: In this method we have the need of two elements droppable, and target for draggable elements.

Example: You can use this function.

  1. $(function() {  
  2.     $("#draggableElement").draggable();  
  3.     $("#droppableElement").droppable({  
  4.         drop: function(event, ui) {  
  5.             $(this)  
  6.                 .addClass("ui-state-highlight")  
  7.                 .find("p")  
  8.                 .html("Dropped!");  
  9.         }  
  10.     });  
  11. });  


                                          Figure: Droppable image before dropping
                                    Figure: Dropable image after dropping

Resizable: In this we can resize our element accordingly.


You can resize with the cursor; grab the right or bottom border and drag to the width or height. But your code cannot work without resizable.css file.

My CSS is below:

  1. <link href="Content/themes/base/all.css" rel="stylesheet" />     
  2. <style>   
  3. #resizable {    
  4.   width: 150px;    
  5.   height: 150px;    
  6.   padding: 0.5em;    
  7. }    
  9. #resizable h3 {    
  10.   text-align: center;    
  11.   margin: 0;    
  12. }    
  13. </style>   

Script for resizable method

  1. <script src="Scripts/jquery-2.1.4.js"></script>    
  2. <script src="Scripts/jquery-ui-1.11.4.js"></script>    
  3. <script>   
  4. $(function() {    
  5.     $("#resizable").resizable();    
  6. });    
  7. </script>    

My Body

  1. <div id="resizable" class="ui-widget-content">  
  2. <h3 class="ui-widget-header">Resize accordingly</h3>  
  3. </div>  


               Figure: Image before resizing


                                                   Figure: image after resizable


By this method you can select single element from a list or multiple elements from the list by pressing ctrl key.

Example: In this example you can select single or multiple elements.

My CSS and Scripts

  1. <link href="Content/themes/base/all.css" rel="stylesheet" />       
  2. <style>    
  3. #resizable {      
  4.   width: 150px;      
  5.   height: 150px;      
  6.   padding: 0.5em;      
  7. }      
  9. #resizable h3 {      
  10.   text-align: center;      
  11.   margin: 0;      
  12. }     
  13. </style>    
  15. <script src="Scripts/jquery-2.1.4.js"></script>     
  16. <script src="Scripts/jquery-ui-1.11.4.js"></script>     
  17. <script>  
  18. $(function() {    
  19.     $("#resizable").resizable();    
  20. });   
  21. </script>    


                                                   Figure: Image before selection

                                                         Figure: Image after selection


By using this method you can select any element from the list and replace it to other one, means you can sort your list accordingly.

Example: You can click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

You can use this function for sorting

  1. $(function() {  
  2.     $("#selectableElement").sortable();  
  3.     $("#selectableElement").disableSelection();  
  4. });  


                                                Figure: Image before sorting the elements

                                       Figure: Image after sorting the elements


Thanks for reading. I hope this article provided you the effective understanding of jQuery UI Plugin and there use. You can learn about jQuery UI Widgets, Effect Control, and Utilities Control by reading my next article.