Post
Ask Question

jQuery UI Demystified: Part 2

Introduction

 
In this article, we will learn about jQuery Interaction. jQuery offers 5 kinds of interactions. All are mouse-based and can be used in combination to provide easy interaction for users. This article will cover all the five jQuery UI interactions and it'll use the source file of the Part 1 article. So if you haven't had a look at Part 1 then you have two options.
 
The first is you can continue with this article or you can have a look at Part 1.
 
A quick overview of Part 1
 
In Part 1 we learned how to add a widget on any HTML element. In brief it is like:
 
$(element_to_target).widget_name({List_of_options});
 
If we dismantle this line of code then we have the following to learn:
  1. $ - It is a valid JavaScript identifier or variable name and it's a shorthand notation for writing jQuery. For instance, the following two code samples represent the same thing.
     
    code1:jQuery('.test').tooltip();
    code2:$('.test').tooltip();
      
  2. $(element_to_target) - Here the mystery is in shorthand. If we replace the $ with jQuery then it will look like this: jQuery('element_to_target'). Oh, guess what it is! It looks like nothing but a function call where "element_to_target" is a parameter passed to a function. In a nutshell, it represents a function call that wraps the element_to_target into a jQuery object.
     
  3. .widget_name() - It is used for setting a particular widget on that object.
For examples and more details, you can check Part 1 of this article.
 
Working with jQuery Interactions
 

Draggable     

  • To add this effect just add this line off code to your JS file after "$('#login').tooltip({});":
     
    $('#dropme').draggable({});
     
    Here this line adds the draggable interaction to the accordion widget. Please note that excessive use of this interaction may lead to the clustering of elements. So use it wisely.
     
  • Now add this in your HTML within the body tag but as the last element (it is not necessary but helps in maintaining the page structure).
     
    <div id='dropme' style='width:100px;height:10px;color:red;'>Can you drop me on Green.</div>
     
    a3p1.PNG
     

Droppable

  • To add this effect you need to add this code to your HTML file:
    1. <div id='plsCome' style='width:100px;height:100px;background-color:green;'></div>  
    2.  This basically adds a new div the to page that we will be our drop target.  
  • Now add this line of code in your JS file to add droppable interaction on the newly created Div:
    1. $("#plsCome").droppable({  
    2.     drop: function () {  
    3.         $(this).html("Thanks for your help!");  
    4.     }  
    5. }); 
    This time I added one option, "show", to the option braces to make the effect visible. This function will be executed when the element is dropped on it. The ".html()" sets the content of the div.
     
    a3p2.PNG
     

Resizeable

  • Want to change the size of an element? Then add this line of code in your JS page after the line:  $('#dropme').draggable({});
     
    $('#plsCome').resizable({});
     
    This line will make your plsCome div a resizable div. Just try this option also "ghost:true".
     
    $('#plsCome').resizable({ghost:true});
     
a3p3.jpg
 

Selectable

  • Sometimes it is necessary to make a selection visible in a list. For that we can use selectable. For this you need to add the following piece of code to your HTML page:
    1. <style>  
    2.   #selectMe .ui-selected { background: #F39814; color: white; }  
    3.   </style>  
    4.   <br>  
    5.   <ul id="selectMe">  
    6.   <li class="ui-widget-content">Selection 1</li>  
    7.   <li class="ui-widget-content">Selection 2</li>  
    8.   <li class="ui-widget-content">Selection 3</li>  
    9.   </ul> 
    Here the style tag adds the CSS in the HTML page itself. The ".ui-selected" class is required. It applies the visuals after the selection is made. For other CSS classes that are available for this interaction, you can check the jQuery UI docs.
     
  • Now add this line of code to enable selection on the preceding list in your JS file:
     
    $('#selectMe').selectable({});
     
    a3p4.PNG
     

Sortable

  •  Here is the HTML:
    1. <br>  
    2. <ul id="sortMe">  
    3. <li class="ui-widget-content">Sortable 2</li>  
    4. <li class="ui-widget-content">Sortable 1</li>  
    5. <li class="ui-widget-content">Sortable 3</li>  
    6. </ul> 
  • And as usual the one-line jQuery in your JS file:
     
    $('#sortMe').sortable({});
     
    a3p5.jpg
     

Summary

 
All done. It's time to check out what we have learned so far. We learned about jQuery Interaction. We uncovered the secrets behind $. (It's a symbol that is important in real life as well as in web development so stick it into your brain).  We covered all five of the interactions available in jQuery. We have seen how easy it is to use them. We saw examples of each interaction. In conclusion, it is important to understand when to use each interaction. If you use them wisely then your page will definitely be blessed by jQuery. Don't stop only on this now, you have the launch pad ready for diving into the jQuery Docs.
 
In Part 3 we will learn about the effects and how to use them in a simple and effective way.
 
Thanks for reading this article. Don't forget to comment. Like is optional but good to have. :)  
 
Live demo


Similar Articles