JqueryUI - Quick Guide

JqueryUI - Overview

JqueryUI is a powerful Javascript library built on top of jQuery JavaScript library. UI stands for User interface, It is a set of plug-ins for jQuery that adds new functionalities to the jQuery core library.

The set of plug-ins in JqueryUI includes interface interactions, effects, animations, widgets, and themes built on top of jQuery JavaScript Library.

It was released in September 2007, announced in a blog post by John Resig on jquery.com. The latest release, 1.10.4, requires jQuery 1.6 or later version. jQuery UI is a free, open source software, licensed under the MIT License.

Features

JqueryUI is categorized into four groups, interactions, widgets, effects, utilities. These will be discussed in detail in the subsequent chapters. The structure of the library is as shown in the image below −

• Interactions − These are the interactive plugins like drag, drop, resize and more which give the user the ability to interact with DOM elements.

• Widgets − Using widgets which are jQuery plugins, you can create user interface elements like accordian,datepicker etc.

• Effects − These are built on the internal jQuery effects. They contain a full suite of custom animations and transitions for DOM elements.

• Utilities − These are a set of modular tools the JqueryUI library uses internally.

Benefits of JqueryUI

The below are some of the benefits of Jquery UI −

• Cohesive and Consistent APIs.
• Comprehensive Browser Support.
• Open Source and Free to Use.
• Good Documentation.
• Powerful Theming Mechanism.
• Stable and Maintenance Friendly.

JqueryUI - Environment Setup

This chapter will discuss about download and set up of JqueryUI library. We will also briefly study the directory structure and its contents. JqueryUI library can be used in two ways in your web page −

• Downloading UI Library from its official website

• Downloading UI Library from CDNs

Download UI Library from Its Official Website

When you open the link http://jqueryui.com/, you will see there are three options to download JqueryUI library −

• Custom Download − Click on this button to download a customized version of library.

• Stable − Click on this button to get the stable and latest version of JqueryUI library.

• Legacy − Click on this button to get the previous major release of the JqueryUI library.

Custom Download with Download Builder

Using Download Builder, you can create a custom build to include only those portions of the library that you need. You can download this new customized version of JqueryUI, depending on the chosen theme. You will see the following screen (same page is split into two images) −

This is useful when you require only specific plugins or features of the JqueryUI library. The directory structure of this version is shown in the following figure −

Uncompressed files are located in the development-bundle directory. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production.

Stable download

Click on the Stable button, which leads directly to a ZIP file containing the sources, examples, and documentation for latest version of JqueryUI library. Extract the ZIP file contents to a jqueryui directory.

This version contains all files including all dependencies, a large collection of demos, and even the library’s unit test suite. This version is helpful to getting started.

Legacy download

Click on the Legacy button, which leads directly to a ZIP file of previous major release of JqueryUI library. This version also contains all files including all dependencies, a large collection of demos, and even the library’s unit test suite. This version is helpful to get you started.

Download UI Library from CDNs

A CDN or Content Delivery Network is a network of servers designed to serve files to users. If you use a CDN link in your web page, it moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of JqueryUI from the same CDN, it won't have to be re-downloaded.

The jQuery Foundation, Google, and Microsoft all provide CDNs that host jQuery core as well as jQuery UI.

Because a CDN does not require you to host your own version of jQuery and jQuery UI, it is perfect for demos and experimentation.

We are using the CDN versions of the library throughout this tutorial.

Example

Now let us write a simple example using JqueryUI. Let us create an HTML file, copy the following content to the <head> tag −

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
   rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Details of the above code are −

• The first line, adds jQuery UI theme (in our case ui-lightness) via CSS. This CSS will make our UI stylish.

• Second line, adds the jQuery library, as jQuery UI is built on top of jQuery library.

• Third line, adds the jQuery UI library. This enables jQuery UI in your page.

Now let's add some content to <head> tag −

<script type = "text/javascript">
   $(function () {
      $('#dialogMsg').dialog();
   });
</script>

In the <body> add this −

<body>
   <form id = "form1" runat = "server">
      <div id = "dialogMsg" title = "First JqueryUI Example">
         Hello this is my first JqueryUI example.
      </div>
   </form>
</body>

The complete HTML code is as follows. Save it as myfirstexample.html

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script type = "text/javascript">
         $(function () {
            $('#dialogMsg').dialog();
         });
      </script>
   </head>
   
   <body>
      <form id = "form1" runat = "server">
         <div id = "dialogMsg" title = "First JqueryUI Example">
            Hello this is my first JqueryUI example.
         </div>
      </form>
   </body>
</html>

Open the above page in your browser. It will produce the following screen.

JqueryUI - Draggable

jQueryUI provides draggable() method to make any DOM element draggable. Once the element is draggable, you can move that element by clicking on it with the mouse and dragging it anywhere within the viewport.

Syntax

The draggable() method can be used in two forms −

• $(selector, context).draggable (options) Method

• $(selector, context).draggable ("action", [params]) Method

$ (selector, context).draggable (options) Method

The draggable (options) method declares that an HTML element can be moved in the HTML page. The options parameter is an object that specifies the behavior of the elements involved.

Syntax

$(selector, context).draggable(options);

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −

$(selector, context).draggable({option1: value1, option2: value2..... });

The following table lists the different options that can be used with this method −

$(".selector").draggable(
   { addClasses: false }
);

$(".selector").draggable(
   { appendTo: "body"}
);

$(".selector").draggable(
   { axis: "x" }
);

$(".selector").draggable(
   { cancel: ".title" }
);

$(".selector").draggable(
   { connectToSortable: "#my-sortable" }
);

$(".selector").draggable(
   { containment: "parent" }
);

$(".selector").draggable(
   { cursor: "crosshair" }
);

$(".selector").draggable(
   $( ".selector" ).draggable({ cursorAt: { left: 5 } });
);

$(".selector").draggable(
   { delay: 300 }
);

$(".selector").draggable(
   { disabled: true }
);

$(".selector").draggable(
   { distance: 10 }
);

$(".selector").draggable(
   { grid: [ 50, 20 ] }
);

$(".selector").draggable(
   { handle: "h2" }
);

$(".selector").draggable(
   { helper: "clone" }
);

$(".selector").draggable(
   { iframeFix: true }
);

$(".selector").draggable(
   {  opacity: 0.35 }
);

$(".selector").draggable(
   { refreshPositions: true }
);

$(".selector").draggable(
   { revert: true }
);

$(".selector").draggable(
   { revertDuration: 200 }
);

$(".selector").draggable(
   { scope: "tasks" }
);

$(".selector").draggable(
   { scroll: false }
);

$(".selector").draggable(
   { scrollSensitivity: 100 }
);

$(".selector").draggable(
   { scrollSpeed: 100 }
);

$(".selector").draggable(
   { snap: true }
);

$(".selector").draggable(
   { snapMode: "inner" }
);

$(".selector").draggable(
   { snapTolerance: 30 }
);

$(".selector").draggable(
   { stack: ".products"  }
);

$(".selector").draggable(
   { zIndex: 100 }
);

The following section will show you a few working examples of drag functionality.

Default functionality

The following example demonstrates a simple example of draggable functionality passing no parameters to the draggable() method.

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

Let us save the above code in an HTML file dragexample.htm and open it in a standard browser that supports javascript. You must also see the following output. Now, you can play with the result −

Use of Disable, Distance, and Delay

The following example shows the usage of three important options (a) disabled (b) delay and (c) distance in the drag function of JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   </head>
   
   <body>
      <div id = "div1" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can't move me!</span><br /><br />
      </div>
      <div id = "div2" style = "border:solid 1px;background-color:grey;">
         <span>
            Dragging will start only after you drag me for 50px
         </span>
         <br /><br />
      </div>
      <div id = "div3" style = "border:solid 1px;background-color:gainsboro;">
         <span>
            You have to wait for 500ms for dragging to start!
         </span>
         <br /><br />
      </div>

      <script>
         $("#div1 span").draggable (
            { disabled: true }
         );
         $("#div2 span").draggable (
            { distance: 50 }
         );
         $("#div3 span").draggable (
            { delay: 500 }
         );
      </script>
   </body>
</html>

Let us save the above code in an HTML file dragexample.htm and open it in a standard browser that supports javascript, you should see the following output. Now, you can play with the result −

Constrain Movement

The following example shows how to limit the movement of elements on the screen using containment option in the drag function of JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   </head>
      
   <body>
      <div id = "div4" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can drag me only within this div.</span><br /><br />
      </div>
      <div id = "div5" style = "border:solid 1px;background-color:grey;">
         <span>You can drag me only along x axis.</span><br /><br />
      </div>

      <script>
         $("#div4 span").draggable ({
            containment : "#div4"
         });
         $("#div5 span").draggable ({
            axis : "x"
         });
      </script>
   </body>
</html>

Let us save the above code in an HTML file dragexample.htm and open it in a standard browser which supports javascript. It should produce the following output. Now, you can play with the output −

Here, <span> elements are prevented from going outside a <div> whose ID is div4. You can also impose constraints on vertical or horizontal motion using options axis worth "x" or "y", which is also demonstrated.

Move content by duplicating

The following example demonstrates how to move an item that is the clone of the selected element. This is done using the option helper with value clone.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   </head>
   
   <body>
      <div id = "div6" style = "border:solid 1px;background:#eee; height:50px;">
         <span>You can duplicate me....</span>
      </div>
      
      <script>
         $("#div6 span").draggable ({
            helper : "clone"
         });
      </script>
   </body>
</html>

Let us save the above code in an HTML file dragexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

As you can see when the first element is being dragged, only the cloned element moves, while the original item stays put. If you release the mouse, the cloned element disappears and the original item is still in its original position.

Get Current Option Value

The following example demonstrates how you can get a value of any option at any time during your script execution. Here we will read the value of cursor and cursorAt options set at the time of execution. Similar way you can get value of any other options available.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   </head>

   <body>
      <div id = "divX" style = "border:solid 1px;background:#eee; height:50px;">
         <span>Click anywhere on me to see cursor type...</span>
      </div>

      <script>
         /* First make the item draggable */
         $("#divX span").draggable();

         $("#divX span").bind('click', function( event ) {
            var cursor = $( "#divX span" ).draggable( "option", "cursor" );
            var cursorAt = $( "#divX span" ).draggable( "option", "cursorAt" );
            alert("Cursor type - " + cursor + ", cursorAt - " + cursorAt);
         });
      </script>
   </body>
</html>

Let us save the above code in an HTML file dragexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

$ (selector, context).draggable ("action", [params]) Method

The draggable (action, params) method can perform an action on the movable elements, such as to prevent displacement. The action is specified as a string in the first argument and optionally, one or more params can be provided based on the given action.

Basically, Here actions are nothing but they are jQuery methods which we can use in the form of string.

Syntax

$(selector, context).draggable ("action", [params]);

The following table lists the actions for this method −

$(".selector").draggable("destroy");

$(".selector").draggable("disable");

$(".selector").draggable("enable");

var isDisabled = $( ".selector" ).draggable( "option", "disabled" );

var options = $( ".selector" ).draggable( "option" );

$( ".selector" ).draggable( "option", "disabled", true );

$(".selector").draggable("option", { disabled: true } );

var widget = $(".selector ).draggable("widget");

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of actions disable and enable.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   </head>
   
   <body>
      <div id = "div7" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can't move me. Dragging is disabled.</span><br><br>
      </div>
      <div id = "div8" style = "border:solid 1px;background-color:grey;">
         <span>You can move me. Dragging is enabled.</span><br><br>
      </div>
      
      <script>
         $("#div7 span").draggable ();
         $("#div7 span").draggable ('disable');
         $("#div8 span").draggable ();
         $("#div8 span").draggable ('enable');
      </script>
   </body>
</html>

Let us save the above code in an HTML file dragexample.htm and open it in a standard browser which supports javascript, you should see the following output −

As you can see first element is disabled and the second element's dragging is enabled which you can try to drag.

Event Management on the Moved elements

In addition to the draggable (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −

$(".selector").draggable(
   create: function(event, ui) {}
);

$(".selector").draggable(
   drag: function(event, ui) {}
);

$(".selector").draggable(
   start: function( event, ui ) {}
);

$(".selector").draggable(
   stop: function( event, ui ) {}
);

Example

The following example demonstrates the use of event method during drag functionality. This example demonstrates use of drag event.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   </head>
   
   <body>
      <div id = "div9" style = "border:solid 1px;background-color:gainsboro;">
         <span>Drag me to check the event method firing</span><br /><br />
      </div>
      
      <script>
         $("#div9 span").draggable ({
            cursor: "move",
            axis : "x",
            drag: function( event, ui ) {
               alert("hi..");
            }
         });
      </script>
   </body>
</html>

Let us save the above code in an HTML file dragexample.htm and open it in a standard browser which supports javascript, you should the following output −

Now try to drag the written content and you will see that start of a drag event gets fired which results in showing a dialogue box and cursor will change to move icon and text will move in X-axis only.

JqueryUI - Droppable

jQueryUI provides droppable() method to make any DOM element droppable at a specified target (a target for draggable elements).

Syntax

The droppable() method can be used in two forms −

• $(selector, context).droppable (options) Method

• $(selector, context).droppable ("action", params) Method

$ (selector, context).droppable (options) Method

The droppable (options) method declares that an HTML element can be used as an element in which you can drop other elements. The options parameter is an object that specifies the behavior of the elements involved.

Syntax

$(selector, context).droppable (options);

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −

$(selector, context).droppable({option1: value1, option2: value2..... });

The following table lists the different options that can be used with this method −

$( ".selector" ).droppable(
   { accept: ".special" }
);

$( ".selector" ).droppable(
   { activeClass: "ui-state-highlight" }
);

$( ".selector" ).droppable(
   { addClasses: false }
);

$( ".selector" ).droppable(
   { disabled: true }
);

$( ".selector" ).droppable(
   { greedy: true }
);

$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);

$( ".selector" ).droppable(
   { scope: "tasks" }
);

$( ".selector" ).droppable(
   { tolerance: "fit" }
);

The following section will show you a few working examples of drop functionality.

Default Functionality

The following example demonstrates a simple example of droppable functionality, passing no parameters to the droppable() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #draggable-1 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-1 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 	
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-1" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-1" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Let us save the above code in an HTML file dropexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Use of addClass, disabled and tolerance

The following example demonstrates the usage of three options (a) addClass (b) disabled and (c) tolerance in the drop function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable-2 { 
            width: 100px; height: 50px; padding: 0.5em; 
            margin: 0px 5px 10px 0; 	    
         }
         #droppable-2,#droppable-3, #droppable-4,#droppable-5 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
      </style>

      <script>
         $(function() {
            $( "#draggable-2" ).draggable();
            $( "#droppable-2" ).droppable({
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-3" ).droppable({
               disabled : "true",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-4" ).droppable({
               tolerance: 'touch',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped with a touch!" );
               }
            });
				
            $( "#droppable-5" ).droppable({
               tolerance: 'fit',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped only when fully fit on the me!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-2" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-2" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
      <div id = "droppable-3" class = "ui-widget-header">
         <p>I'm disabled, you can't drop here!</p>
      </div>
      <div id = "droppable-4" class = "ui-widget-header">
         <p>Tolerance Touch!</p>
      </div>
      <div id = "droppable-5" class = "ui-widget-header">
         <p>Tolerance Fit!</p>
      </div>
   </body>
</html>

Let us save the above code in an HTML file dropexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Now drop the element on the "Tolerance Touch!" box (just touch the edge of this box) and see the changes of target element. Now to drop the element on "Tolerance Fit!" target, the draggable element has to fully overlap the target element i.e "Tolerance Fit!" target.

Choose elements to be dropped

The following example demonstrates the use of option accept and scope option in the drag function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .wrap {
            display: table-row-group;
         }
         #japanpeople,#indiapeople, #javatutorial,#springtutorial { 
            width: 120px; height: 70px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0; 
         }
         
         #japan,#india,#java,#spring { 
            width: 140px; height: 100px;padding: 0.5em; float: left; 
            margin: 10px;  
         }
      </style>

      <script>
         $(function() {
            $( "#japanpeople" ).draggable();
            $( "#indiapeople" ).draggable();

            $( "#japan" ).droppable({
               accept: "#japanpeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
            $( "#india" ).droppable({
               accept: "#indiapeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });

            $( "#javatutorial" ).draggable({scope : "java"});
            $( "#springtutorial" ).draggable({scope : "spring"});
            $( "#java" ).droppable({
               scope: "java",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#spring" ).droppable({
               scope: "spring",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            }); 
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap" >
         <div id = "japanpeople" class = "ui-widget-content">
            <p>People to be dropped to Japan</p>
         </div>

         <div id = "indiapeople" class = "ui-widget-content">
            <p>People to be dropped to India</p>
         </div>

         <div id = "japan" class = "ui-widget-header">
            <p>Japan</p>
         </div>

         <div id = "india" class = "ui-widget-header">
            <p>India</p>
         </div>
      </div>
      <hr/>
         
      <div class = "wrap" >
         <div id = "javatutorial" class = "ui-widget-content">
            <p>People who want to learn Java</p>
         </div>
         <div id = "springtutorial" class = "ui-widget-content">
            <p>People who want to learn Spring</p>
         </div>
         <div id = "java" class = "ui-widget-header">
            <p>Java</p>
         </div>

         <div id = "spring" class = "ui-widget-header">
            <p>Spring</p>
         </div>
      </div>
   </body>
</html>

Let us save the above code in an HTML file dropexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now you can play with the output −

Here you can see that you can drop element "People from Japan" on only "Japan" target and element "People from India" on target India. Similary the scope for "People who want to learn Java" is set to target "Java" and "People who want to learn Spring" is set to "Spring target".

Managing appearance

The following example demonstrates the use of options activeClass and hoverClass of JqueryUI class, which help us manage appearance.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style type = "text/css">
         #draggable-3 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 21px 5px 10px 0;
         }
         #droppable-6 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
         .active {
            border-color : blue;
            background : grey;
         }  
         .hover {
            border-color : red;
            background : green;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-3" ).draggable();
            $( "#droppable-6" ).droppable({
               activeClass: "active",
               hoverClass:  "hover",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-3" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-6" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Let us save the above code in an HTML file dropexample.htm and open it in a standard browser which supports javascript, you should see the following output −

You can notice that on dragging or hovering (over the target) of "Drag me to my target" element, changes the color of target element "Drop here".

$ (selector, context).droppable ("action", params) Method

The droppable ("action", params) method can perform an action on droppable elements, such as preventing droppable functionality. The action is specified as a string in the first argument (e.g., "disable" to prevent the drop). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).droppable ("action", params);;

The following table lists the different actions that can be used with this method −

$( ".selector" ).droppable("destroy");

$( ".selector" ).droppable("disable");

$( ".selector" ).droppable("enable");

var options = $( ".selector" ).droppable( "option" );

var isDisabled = $( ".selector" ).droppable( "option", "disabled" );

$( ".selector" ).droppable( "option", "disabled", true );

$( ".selector" ).droppable( "option", { disabled: true } );

var widget = $( ".selector" ).droppable( "widget" );

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of destroy() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .draggable-4 { 
            width: 90px; height: 50px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0;
            border: 1px solid red;  
            background-color:#B9CD6D;
         }
         .droppable-7 { 
            width: 100px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
            border: 1px solid black; 
            background-color:#A39480;
         }
         .droppable.active { 
            background-color: red; 
         }
      </style>
      
      <script>
         $(function() {
            $('.draggable-4').draggable({ revert: true });
            $('.droppable-7').droppable({
               hoverClass: 'active',
               drop: function(e, ui) {
                  $(this).html(ui.draggable.remove().html());
                  $(this).droppable('destroy');
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "i'm destroyed!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "draggable-4"><p>drag 1</p></div>
      <div class = "draggable-4"><p>drag 2</p></div>
      <div class = "draggable-4"><p>drag 3</p></div>

      <div style = "clear: both;padding:10px"></div>

      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
   </body>
</html>

Let us save the above code in an HTML file dropexample.htm and open it in a standard browser which supports javascript, you should see the following output −

If you drop "drag1" on any of the elements named "drop here", you will notice that this element gets dropped and this action destroys the droppable functionality of an element completely. You cannot drop "drag2" and "drag3" on this element again.

Event Management on droppable elements

In addition to the droppable (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −

$( ".selector" ).droppable({
   activate: function( event, ui ) {}
});

$( ".selector" ).droppable({
   create: function( event, ui ) {}
});

$(".selector").droppable(
   deactivate: function(event, ui) {}
);

$(".selector").droppable(
   drop: function(event, ui) {}
);

$(".selector").droppable(
   out: function(event, ui) {}
);

$(".selector").droppable(
   over: function(event, ui) {}
);

Example

The following example demonstrates the event method usage during drop functionality. This example demonstrates the use of events drop, over and out.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable-5 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-8 {    
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-5" ).draggable();
            $("#droppable-8").droppable({
               drop: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               },   
               over: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving in!" );
               },
               out: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving out!" );
               }      
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-5" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-8" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Let us save the above code in an HTML file dropexample.htm and open it in a standard browser which supports javascript, you should see the following output −

Here you will notice how the message in the droppable element changes as you drag the element.

JqueryUI - Resizable

jQueryUI provides resizable() method to resize any DOM element. This method simplifies the resizing of element which otherwise takes time and lot of coding in HTML. The resizable () method displays an icon in the bottom right of the item to resize.

Syntax

The resizable() method can be used in two forms −

• $(selector, context).resizable (options) Method

• $(selector, context).resizable ("action", params) Method

$ (selector, context).resizable (options) Method

The resizable (options) method declares that an HTML element can be resized. The options parameter is an object that specifies the behavior of the elements involved when resizing.

Syntax

$(selector, context).resizable (options);

You can provide one or more options at a time of using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −

$(selector, context).resizable({option1: value1, option2: value2..... });

The following table lists the different options that can be used with this method −

$( ".selector" ).resizable({ alsoResize: "#identifier" });

$( ".selector" ).resizable({ animate: true });

$( ".selector" ).resizable({ animateDuration: "fast" });

$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });

$( ".selector" ).resizable({ aspectRatio: true });

$( ".selector" ).resizable({ autoHide: true });

$( ".selector" ).resizable({ cancel: ".cancel" });

$( ".selector" ).resizable({ containment: "parent" });

$( ".selector" ).resizable({ delay: 150 });

$( ".selector" ).resizable({ disabled: true });

$( ".selector" ).resizable({ distance: 30 });

$( ".selector" ).resizable({ ghost: true });

$( ".selector" ).resizable({ grid: [ 20, 10 ] });

$( ".selector" ).resizable({ handles: "n, e, s, w" });

$( ".selector" ).resizable({ helper: "resizable-helper" });

$( ".selector" ).resizable({ maxHeight: 300 });

$( ".selector" ).resizable({ maxWidth: 300 });

$( ".selector" ).resizable({ minHeight: 150 });

$( ".selector" ).resizable({ minWidth: 150 });

The following section will show you few a working examples of resize functionality.

Default Functionality

The following example demonstrates a simple example of resizable functionality, passing no parameters to the resizable() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable { width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Pull my edges to resize me!!</h3>
      </div>
  </body>
</html>

Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Drag the square border to resize.

Use of animate and ghost

The following example demonstrates the usage of two options animate and ghost in the resize function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-2,#resizable-3 { 
            width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-2" ).resizable({
               animate: true
            });
            $( "#resizable-3" ).resizable({
               ghost: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "resizable-2" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">
            Pull my edges and Check the animation!!
         </h3>
      </div><br>
      <div id = "resizable-3" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm ghost!!</h3>
      </div> 
   </body>
</html>

Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Drag the square border to resize and see the effect of animate and ghost options.

Use of containment, minHeight, and minWidth

The following example demonstrates the usage of three options containment, minHeight and minWidth in the resize function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #container-1 { width: 300px; height: 300px; }
         #resizable-4 {background-position: top left; 
            width: 150px; height: 150px; } 
         #resizable-4, #container { padding: 0.5em; }  
      </style>

      <script>
         $(function() {
            $( "#resizable-4" ).resizable({
               containment: "#container",
               minHeight: 70,
               minWidth: 100
            });
         });
      </script>
   </head>

   <body>
      <div id = "container" class = "ui-widget-content">
         <div id = "resizable-4" class = "ui-state-active">
            <h3 class = "ui-widget-header">
               Resize contained to this container
            </h3>
         </div>
      </div> 
   </body>
</html>

Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Drag the square border to resize, you cannot resize beyond the main container.

Use of delay, distance, and autoHide

The following example demonstrates the usage of three options delay, distance and autoHide in the resize function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            -right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-5" ).resizable({
               delay: 1000
            });

            $( "#resizable-6" ).resizable({
               distance: 40
            });
            $( "#resizable-7" ).resizable({
               autoHide: true
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-5" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts after delay of 1000ms
         </h3>
      </div><br>
      <div id = "resizable-6" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts at distance of 40px
         </h3>
      </div><br>
      <div id = "resizable-7" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Hover over me to see the magnification icon!
         </h3>
      </div>
   </body>
</html>

Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Drag the square border to resize and you can notice that −

• The first square box resizes after a delay of 1000ms,

• Second square box starts resizing after the mouse moves 40px.

• Hover the mouse on the third square box, and the magnification icon appears.

Use of alsoResize

The following example demonstrates the usage of option alsoResize in the resize function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-8,#resizable-9{ width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-8" ).resizable({
               alsoResize: "#resizable-9"
            });
            $( "#resizable-9" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable-8" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize!!</h3>
      </div><br>
      <div id = "resizable-9" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I also get resized!!</h3>
      </div> 
   </body>
</html>

Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Drag the square border to resize and you can notice that the second square box also resizes with the first square box.

Use of AspectRatio, Grid

The following example demonstrates the usage of option aspectRatio and grid in the resize function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            margin-right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-10" ).resizable({
               aspectRatio: 10 / 3
            });

            $( "#resizable-11" ).resizable({
               grid: [50,20]
            });

         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-10" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize with aspectRatio of 10/3
         </h3>
      </div>
      <div id = "resizable-11" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Snap me to the grid of [50,20]
         </h3>
      </div>
   </body>
</html>

Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Drag the square border to resize, the first square box resizes with the aspect ratio of 10 / 3 and the second one resizes with grid of [50,20].

$ (selector, context).resizable ("action", params) Method

The resizable ("action", params) method can perform an action on resizable elements, such as allowing or preventing resizing functionality. The action is specified as a string in the first argument (e.g., "disable" to prevent the resize). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).resizable ("action", params);;

The following table lists the different actions that can be used with this method −

 $( ".selector" ).resizable("destroy");

 $( ".selector" ).resizable("disable");

$( ".selector" ).resizable("enable");

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );

 
var options = $( ".selector" ).resizable( "option" );

 
$( ".selector" ).resizable( "option", "disabled", true );

 
$( ".selector" ).resizable( "option", { disabled: true } );

 
var widget = $( ".selector" ).resizable( "widget" );

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of destroy() and disable() methods.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-12,#resizable-13 { width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-12" ).resizable();
            $( "#resizable-12" ).resizable('disable');
            $( "#resizable-13" ).resizable();
            $( "#resizable-13" ).resizable('destroy');	
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable-12" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm disable!!</h3>
      </div><br>
      <div id = "resizable-13" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm Destroyed!!</h3>
      </div>
   </body>
</html>

Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you should see the following output −

You cannot resize the first square box as its disabled and the second square box is destroyed.

Event Management on resizable elements

In addition to the resizable (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −

$( ".selector" ).resizable({
create: function( event, ui ) {}
});

$( ".selector" ).resizable({
resize: function( event, ui ) {}
});

$( ".selector" ).resizable({
 start: function( event, ui ) {}
});

$( ".selector" ).resizable({
stop: function( event, ui ) {}
});

Example

The following example demonstrates the event method usage during resize functionality. This example demonstrates the use of events create, and resize.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-14{ width: 150px; height: 150px; 
         padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-14" ).resizable({
               create: function( event, ui ) {
                  $("#resizable-15").text ("I'm Created!!");
               },
               resize: function (event, ui) {
                  $("#resizable-16").text ("top = " + ui.position.top +
                     ", left = " + ui.position.left +
                     ", width = " + ui.size.width +
                     ", height = " + ui.size.height);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "resizable-14" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize !!</h3>
      </div><br>
      <span id = "resizable-15"></span><br>
      <span id = "resizable-16"></span>
   </body>
</html>

Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, should must see the following output −

Drag the square box and you will see the output getting displayed on resize event.

JqueryUI - Selectable

jQueryUI provides selectable() method to select DOM element individually or in a group. With this method elements can be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by clicking or dragging while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.

Syntax

The selectable() method can be used in two forms −

• $(selector, context).selectable (options) Method

• $(selector, context).selectable ("action", params) Method

$ (selector, context).selectable (options) Method

The selectable (options) method declares that an HTML element contains selectable items. The options parameter is an object that specifies the behavior of the elements involved when selecting.

Syntax

$(selector, context).selectable (options);

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided, then you will separate them using a comma as follows −

$(selector, context).selectable({option1: value1, option2: value2..... });

The following table lists the different options that can be used with this method −

$( ".selector" ).selectable({ appendTo: "#identifier" });

$( ".selector" ).selectable({ autoRefresh: false });

$( ".selector" ).selectable({ cancel: "a,.cancel" });

$( ".selector" ).selectable({ delay: 150 });

$( ".selector" ).selectable({ disabled: true });

$( ".selector" ).selectable({ distance: 30 });

$( ".selector" ).selectable({ filter: "li" });

$( ".selector" ).selectable({ tolerance: "fit" });

The following section will show you a few working examples of selectable functionality.

Default Functionality

The following example demonstrates a simple example of selectable functionality, passing no parameters to the selectable() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-1</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #selectable-1 .ui-selecting { background: #707070 ; }
         #selectable-1 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-1 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-1" ).selectable();
         });
      </script>
   </head>
   
   <body>
      <ol id = "selectable-1">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol> 
   </body>
</html>

Let us save the above code in an HTML file selectableexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Try to click on products, use CTRLS key to select multiple products.

Use of Delay and Distance

The following example demonstrates the usage of two options delay and distance in the selectable function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #selectable-2 .ui-selecting,#selectable-3 .ui-selecting { 
            background: #707070 ; }
         #selectable-2 .ui-selected,#selectable-3 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-2,#selectable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-2 li,#selectable-3 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#selectable-2" ).selectable({
               delay : 1000
            });
            $( "#selectable-3" ).selectable({
               distance : 100
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Starts after delay of 1000ms</h3>
      <ol id = "selectable-2">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Starts after mouse moves distance of 100px</h3>
      <ol id = "selectable-3">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

Let us save the above code in an HTML file selectableexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Try to click on products, use CTRL key to select multiple products. You will notice that selection of the Product 1, Product 2 and Product 3 start after a delay of 1000ms. Selection of the Product 4, Product 5, Product 6 and Product 7 can't be done individually. The selection starts only after the mouse moves a distance of 100px.

Use of Filter

The following example demonstrates the usage of two options delay and distance in the selectable function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-4</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #selectable-4 .ui-selecting { background: #707070 ; }
         #selectable-4 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-4 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
     
      <script>
         $(function() {
            $( "#selectable-4" ).selectable({
               filter : "li:first-child"
            });
         });
      </script>
   </head>
   
   <body>
      <ol id = "selectable-4">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

Let us save the above code in an HTML file selectableexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Try to click on products. You will notice that only first product can be selected.

$ (selector, context).selectable ("action", params) Method

The selectable ("action", params) method can perform an action on selectable elements, such as preventing selectable functionality. The action is specified as a string in the first argument (e.g., "disable" to stop the selection). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).selectable ("action", params);;

The following table lists the different actions that can be used with this method −

$( ".selector" ).selectable("destroy");

$( ".selector" ).selectable("disable");

$( ".selector" ).selectable("enable");

var isDisabled = $( ".selector" ).selectable( "option", "disabled" );

var options = $( ".selector" ).selectable( "option" );

$( ".selector" ).selectable( "option", "disabled", true );

$( ".selector" ).selectable( "option", { disabled: true } );

$( ".selector" ).selectable("refresh");

var widget = $( ".selector" ).selectable( "widget" );

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of disable() and option( optionName, value ) methods.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #selectable-5 .ui-selecting,#selectable-6 .ui-selecting { 
            background: #707070 ; }
         #selectable-5 .ui-selected,#selectable-6 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-5,#selectable-6 { 
            list-style-type: none; margin: 0; padding: 0; width: 20%; }
         #selectable-5 li,#selectable-6 li { 
            margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#selectable-5" ).selectable();
            $( "#selectable-5" ).selectable('disable');
            $( "#selectable-6" ).selectable();
            $( "#selectable-6" ).selectable( "option", "distance", 1 );	
         });
      </script>
   </head>
   
   <body>
      <h3>Disabled using disable() method</h3>
      <ol id = "selectable-5">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Select using method option( optionName, value )</h3>
      <ol id = "selectable-6">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

Let us save the above code in an HTML file selectableexample.htm and open it in a standard browser which supports javascript, you should see the following output −

Try to click on products, use CTRL key to select multiple products. You will notice that Product 1, Product 2, and Product 3 are disabled. Selection of Product 4, Product 5, Product 6 and Product 7 happens after the mouse moves distance of 1px.

Event Management on Selectable Elements

In addition to the selectable (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −

$( ".selector" ).selectable({
   create: function( event, ui ) {}
});

$( ".selector" ).selectable({
   selected: function( event, ui ) {}
});

$( ".selector" ).selectable({
   selecting: function( event, ui ) {}
});

$( ".selector" ).selectable({
   start: function( event, ui ) {}
});

$( ".selector" ).selectable({
   stop: function( event, ui ) {}
});

$( ".selector" ).selectable({
   unselected: function( event, ui ) {}
});

$( ".selector" ).selectable({
   unselecting: function( event, ui ) {}
});

Example

The following example demonstrates the event method usage during selectable functionality. This example demonstrates the use of event selected.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-7</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #selectable-7 .ui-selecting { background: #707070 ; }
         #selectable-7 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-7 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-7 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#selectable-7" ).selectable({
               selected: function() {
                  var result = $( "#result" ).empty();
                  $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable-7 li" ).index( this );
                     result.append( " #" + ( index + 1 ) );
                  });
               }
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Events</h3>
      <ol id = "selectable-7">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
      <span class = "resultarea">Selected Product</span>>
      <span id = result class = "resultarea"></span>
   </body>
</html>

Let us save the above code in an HTML file selectableexample.htm and open it in a standard browser which supports javascript, you should see the following output −

Try to click on products, use CTRL key to select multiple products. You will notice that the product number selected is printed at the bottom.

JqueryUI - Sortable

jQueryUI provides sortable() method to reorder elements in list or grid using the mouse. This method performs sortability action based upon an operation string passed as the first parameter.

Syntax

The sortable () method can be used in two forms −

• $(selector, context).sortable (options) Method

• $(selector, context).sortable ("action", [params]) Method

$ (selector, context).sortable (options) Method

The sortable (options) method declares that an HTML element contains interchangeable elements. The options parameter is an object that specifies the behavior of the elements involved during reordering.

Syntax

$(selector, context).sortable(options);

The following table lists the different options that can be used with this method −

$(".selector").sortable(
   { appendTo: document.body }
);

$(".selector").sortable(
   { axis: "x" }
);

$(".selector").sortable(
   { cancel: "a,button" }
);

$(".selector").sortable(
   { connectWith: "#identifier" }
);

$(".selector").sortable(
   { containment: "parent" }
);

$(".selector").sortable(
   { cursor: "move" }
);

$(".selector").sortable(
   { cursorAt: { left: 5 } }
);

$(".selector").sortable(
   { delay: 150 }
);

$(".selector").sortable(
   { disabled: true }
);

$(".selector").sortable(
   { distance: 5 }
);

$(".selector").sortable(
   { dropOnEmpty: false }
);

$(".selector").sortable(
   { forceHelperSize: true }
);

$(".selector").sortable(
   { forcePlaceholderSize: true }
);

$(".selector").sortable(
   { grid: [ 20, 10 ] }
);

$(".selector").sortable(
   { handle: ".handle" }
);

$(".selector").sortable(
   { helper: "clone" }
);

$(".selector").sortable(
   { items: "> li" }
);

$(".selector").sortable(
   { opacity: 0.5 }
);

$(".selector").sortable(
   { addClasses: false }
);

$(".selector").sortable(
   { revert: true }
);

$(".selector").sortable(
   { scroll: false }
);

$(".selector").sortable(
   { scrollSensitivity: 10 }
);

$(".selector").sortable(
   { scrollSpeed: 40 }
);

$(".selector").sortable(
   { tolerance: "pointer" }
);

$(".selector").sortable(
   { zIndex: 9999 }
);

The following section will show you a few working examples of drag functionality.

Default functionality

The following example demonstrates a simple example of sortable functionality, passing no parameters to the sortable() method.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-1" ).sortable();
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-1">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

Let us save the above code in an HTML file sortexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Re-arrange the products above, use mouse to drag items.

Use of Options Delay and Distance

The following example demonstrates the usage of three options (a) delay and (b) distance in the sort function of JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-2, #sortable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-2" ).sortable({
               delay:500
            });
            $( "#sortable-3" ).sortable({
               distance:30
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Delay by 500ms</h3>
      <ul id = "sortable-2">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
      <h3>Distance Delay by 30px</h3>
      <ul id = "sortable-3">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
   </body>
</html>

Let us save the above code in an HTML file sortexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Re-arrange the products above, use mouse to drag items. To prevent accidental sorting either by delay (time) or distance, we have set a number of milliseconds the element needs to be dragged before sorting starts with the delay option. We have also set a distance in pixels the element needs to be dragged before sorting starts with the distance option.

Use of Placeholder

The following example demonstrates the usage of three option placeholder in the sort function of JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #sortable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid red;
            font-weight: bold;
            font-size: 45px;
            background-color: #333333;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-4" ).sortable({
               placeholder: "highlight"
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-4">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

Let us save the above code in an HTML file sortexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Try to drag items to rearrange them, while you're dragging items, the placeholder (we have used highlight class to style this space) will show up on an available place.

Use of Options Connectwith and Droponempty

The following example demonstrates the usage of three options (a) connectWith and (b) dropOnEmpty in the sort function of JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-5, #sortable-6,#sortable-7 { 
            list-style-type: none; margin: 0; padding: 0;
            width: 20%;float:left }
         #sortable-5 li, #sortable-6 li,#sortable-7 li { 
            margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-5, #sortable-6" ).sortable({
               connectWith: "#sortable-5, #sortable-6"
            });
            $( "#sortable-7").sortable({
               connectWith: "#sortable-5",
               dropOnEmpty: false
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-5"><h3>List 1</h3>
         <li class = "default">A</li>
         <li class = "default">B</li>
         <li class = "default">C</li>
         <li class = "default">D</li>
      </ul>
      <ul id = "sortable-6"><h3>List 2</h3>
         <li class = "default">a</li>
         <li class = "default">b</li>
         <li class = "default">c</li>
         <li class = "default">d</li>
      </ul>
      <ul id = "sortable-7"><h3>List 3</h3>
         <li class = "default">e</li>
         <li class = "default">f</li>
         <li class = "default">g</li>
         <li class = "default">h</li>
      </ul>
   </body>
</html>

Let us save the above code in an HTML file sortexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Sort items from one List1 into another (List2) and vice versa, by passing a selector into the connectWith option. This is done by grouping all related lists with a CSS class, and then pass that class into the sortable function (i.e., connectWith: '#sortable-5, #sortable-6').

Try to drag the items under List 3 to the List 2 or List 1. As we have set dropOnEmpty option to false, it won't be possible to drop these items.

$ (selector, context).sortable ("action", [params]) Method

The sortable (action, params) method can perform an action on the sortable elements, such as to prevent displacement. The action is specified as a string in the first argument and optionally, one or more params can be provided based on the given action.

Basically, here actions are nothing but they are jQuery methods which we can use in the form of string.

Syntax

$(selector, context).sortable ("action", [params]);

The following table lists the actions for this method −

$(".selector").sortable("cancel");

$(".selector").sortable("destroy");

$(".selector").sortable("disable");

$(".selector").sortable("enable");

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );

$(".selector").sortable("option");

$(".selector").sortable("option", "disabled", true);

$( ".selector" ).sortable( "option", { disabled: true } );

$(".selector").sortable("refresh");

var sortedIDs = $( ".selector" ).sortable( "toArray" );

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );

$(".selector").sortable("refreshPositions");

$(".selector").sortable("widget");

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of toArray( options ) method.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-8{ list-style-type: none; margin: 0; 
            padding: 0; width: 25%; float:left;}
         #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $('#sortable-8').sortable({
               update: function(event, ui) {
                  var productOrder = $(this).sortable('toArray').toString();
                  $("#sortable-9").text (productOrder);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-8">
         <li id = "1" class = "default">Product 1</li>
         <li id = "2" class = "default">Product 2</li>
         <li id = "3" class = "default">Product 3</li>
         <li id = "4" class = "default">Product 4</li>
      </ul>
      <br>
      <h3><span id = "sortable-9"></span></h3>
   </body>
</html>

Let us save the above code in an HTML file sortexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Try sorting the items, the order of items is displayed at the bottom. Here we are calling $(this).sortable('toArray').toString(), which will give a string list of all the item id's, it might look like 1,2,3,4.

Event Management on The Sortable Elements

In addition to the sortable (options) method which we saw in the previous sections, JqueryUI provides event methods as which gets triggered for a particular event. These event methods are listed below −

$( ".selector" ).sortable({
   activate: function( event, ui ) {}
});

$( ".selector" ).sortable({
   beforeStop: function( event, ui ) {}
});

$( ".selector" ).sortable({
   change: function( event, ui ) {}
});

$( ".selector" ).sortable({
   create: function( event, ui ) {}
});

$( ".selector" ).sortable({
   deactivate: function( event, ui ) {}
});

$( ".selector" ).sortable({
   out: function( event, ui ) {}
});

$( ".selector" ).sortable({
   over: function( event, ui ) {}
});

$( ".selector" ).sortable({
   receive: function( event, ui ) {}
});

$( ".selector" ).sortable({
   remove: function( event, ui ) {}
});

$( ".selector" ).sortable({
   sort: function( event, ui ) {}
});

$( ".selector" ).sortable({
   start: function( event, ui ) {}
});

$( ".selector" ).sortable({
   stop: function( event, ui ) {}
});

$( ".selector" ).sortable({
   update: function( event, ui ) {}
});

Example

The following example demonstrates the event method usage during drop functionality. This example demonstrates the use of events receive, start and stop.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-10, #sortable-11 { list-style-type: none; 
            margin: 0; padding: 0; width: 80%; }
         #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px; 
            padding: 0.4em; padding-left: 1.5em; 
            font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid #000000;
            font-weight: bold;
            font-size: 45px;
            background-color: #cedc98;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .wrap {
            display: table-row-group;
         }
         .wrap1 {
            float:left;
            width: 100px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-10" ).sortable({
               start: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>start</b><br>");
               },
               receive : function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + ", receive");
               },
               stop: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>stop</b><br>");
               }
            });
            $( "#sortable-11" ).sortable({
               connectWith : "#sortable-10, #sortable-11"
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap">
         <div class = "wrap1"> 
            <h3>List 1</h3>
            <ul id = "sortable-10">
               <li class = "default">A</li>
               <li class = "default">B</li>
               <li class = "default">C</li>
               <li class = "default">D</li>
            </ul>
         </div>
         <div class = "wrap1">
            <h3>List 2</h3> 
            <ul id = "sortable-11">
               <li class = "default">a</li>
               <li class = "default">b</li>
               <li class = "default">c</li>
               <li class = "default">d</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

Let us save the above code in an HTML file sortexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Try sorting the items in List 1, you will see the message getting displayed at the start and stop of event. Now drop items from List 2 to List 1, again a message gets displayed on the receive event.

JqueryUI - Accordion

Accordion Widget in jQueryUI is a jQuery based expandable and collapsible content holder that is broken into sections and probably looks like tabs. jQueryUI provides accordion() method to achieve this.

Syntax

The accordion() method can be used in two forms −

• $(selector, context).accordion (options) Method

• $(selector, context).accordion ("action", params) Method

$ (selector, context).accordion (options) Method

The accordion (options) method declares that an HTML element and its contents should be treated and managed as accordion menus. The options parameter is an object that specifies the appearance and behavior of the menu involved.

Syntax

$(selector, context).accordion (options);

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −

$(selector, context).accordion({option1: value1, option2: value2..... });

The following table lists the different options that can be used with this method −

$( ".selector" ).accordion(
   { active: 2 }
);

$( ".selector" ).accordion(
   { animate: "bounceslide" }
);

$( ".selector" ).accordion(
   { collapsible: true }
);

$( ".selector" ).accordion(
   { disabled: true }
);

$( ".selector" ).accordion(
   { event: "mouseover" }
);

$( ".selector" ).accordion(
   { header: "h3" }
);

$( ".selector" ).accordion(
   { heightStyle: "fill" }
);

$( ".selector" ).accordion(
   { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }
);

The following section will show you a few working examples of accordion widget functionality.

Default Functionality

The following example demonstrates a simple example of accordion widget functionality, passing no parameters to the accordion() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-1" ).accordion();
         });
      </script>
      
      <style>
         #accordion-1{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-1">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
      </div>
   </body>
</html>

Let us save the above code in an HTML file accordionexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Click headers(Tab 1,Tab 2,Tab 3) to expand/collapse content that is broken into logical sections, much like tabs.

Use of collapsible

The following example demonstrates the usage of three options collapsible in the accordion widget of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-2" ).accordion({
               collapsible: true
            });
         });
      </script>
      
      <style>
         #accordion-2{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-2">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
   </body>
</html>

Let us save the above code in an HTML file accordionexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Here we have set collapsible to true. Click on an accordion header, this allows collapsing the active section.

Use of heightStyle

The following example demonstrates the usage of three options heightStyle in the accordion widget of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-3" ).accordion({
               heightStyle: "content"
            });
            $( "#accordion-4" ).accordion({
               heightStyle: "fill"
            });
         });
      </script>
      
      <style>
         #accordion-3, #accordion-4{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <h3>Height style-content</h3>
      <div style = "height:250px">
         <div id = "accordion-3">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua. 
               </p>
            </div>
         </div>
      </div><br><br>
      
      <h3>Height style-Fill</h3>
      <div style = "height:250px">
         <div id = "accordion-4">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua. 
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

Let us save the above code in an HTML file accordionexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Here we have two accordions, the first one has heightStyle option set to content, which allows the accordion panels to keep their native height. Second accordion has heightStyle option set to fill, the script will automatically set the dimensions of the accordion to the height of its parent container.

$ (selector, context).accordion ("action", params) Method

The accordion ("action", params) method can perform an action on accordion elements, such as selecting/de-selecting the accordion menu. The action is specified as a string in the first argument (e.g., "disable" disables all menus). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).accordion ("action", params);;

The following table lists the different actions that can be used with this method −

$(".selector").accordion("destroy");

$(".selector").accordion("disable");

$(".selector").accordion("enable");

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );

var options = $( ".selector" ).accordion( "option" );

$( ".selector" ).accordion( "option", "disabled", true );

$( ".selector" ).accordion( "option", { disabled: true } );

$(".selector").accordion("refresh");

var widget = $( ".selector" ).accordion( "widget" );

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of option( optionName, value ) method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-5" ).accordion({
               disabled: false
            });
            $("input").each(function () {
               $(this).change(function () {
                  if ($(this).attr("id") == "disableaccordion") {
                     $("#accordion-5").accordion("option", "disabled", true);
                  } else {
                     $("#accordion-5").accordion("option", "disabled", false);
                  }
               });
            });
         });
      </script>
      
      <style>
         #accordion-5{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-5">
         <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat. 
               </p>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
               </ul>
            </div>
         </div>
         <div style = "margin-top:30px">
            <input type = "radio" name = "disable" id = "disableaccordion"  
               value = "disable">Disable accordion
            <input type = "radio" name = "disable" id = "enableaccordion" checked 
               value = "enable">Enable accordion
         </div>
     </body>
</html>

Let us save the above code in an HTML file accordionexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

Here we demonstrate enabling and disabling of the accordions. Select the respective radio buttons to check each action.

Event Management on accordion elements

In addition to the accordion (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −

$( ".selector" ).accordion({
   activate: function( event, ui ) {}
});

$( ".selector" ).accordion({
   beforeActivate: function( event, ui ) {}
});

$( ".selector" ).accordion({
   create: function( event, ui ) {}
});

Example

The following example demonstrates the event method usage in accordion widgets. This example demonstrates the use of events create, beforeActive and active.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-6" ).accordion({
               create: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>Created</b><br>");
               },
					
               beforeActivate : function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     ", <b>beforeActivate</b><br>");
               },
					
               activate: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>activate</b><br>");
               }
            });
         });
      </script>
      
      <style>
         #accordion-6{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-6">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

Let us save the above code in an HTML file accordionexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

Here we are displaying a text at the bottom, based on events.

JqueryUI - Autocomplete

Auto completion is a mechanism frequently used in modern websites to provide the user with a list of suggestions for the beginning of the word, which he/she has typed in a text box. The user can then select an item from the list, which will be displayed in the input field. This feature prevents the user from having to enter an entire word or a set of words.

JQueryUI provides an autocomplete widget — a control that acts a lot like a <select> dropdown, but filters the choices to present only those that match what the user is typing into a control. jQueryUI provides the autocomplete() method to create a list of suggestions below the input field and adds new CSS classes to the elements concerned to give them the appropriate style.

$(selector, context).autocomplete (options);

$(selector, context).autocomplete({option1: value1, option2: value2..... });

$( ".selector" ).autocomplete({ appendTo: "#identifier" });

$( ".selector" ).autocomplete({ autoFocus: true });

$( ".selector" ).autocomplete({ delay: 500 });

$( ".selector" ).autocomplete({ disabled: true });

$( ".selector" ).autocomplete({ minLength: 0 });

$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });

$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials  =  [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-1" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-1">Tags: </label>
         <input id = "automplete-1">
      </div>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-2" ).autocomplete({
               source: availableTutorials,
               autoFocus:true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-2">Tags: </label>
         <input id = "automplete-2">
      </div>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"	
            ];
            $( "#automplete-3" ).autocomplete({
               minLength:2,   
               delay:500,   
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type two letter for e.g:ja,sc etc</p>
         <label for = "automplete-3">Tags: </label>
         <input id = "automplete-3">
      </div>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#autocomplete-4" ).autocomplete({
               source: [
                  { label: "India", value: "IND" },
                  { label: "Australia", value: "AUS" }
               ]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type I OR A</p>
         <input id = "autocomplete-4">
      </div>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#autocomplete-5" ).autocomplete({
               source: "/jqueryui/search.php",
               minLength: 2
            });
         });
      </script> 
   </head>
   
   <body>
      <input id = "autocomplete-5">
   </body>
</html>

<?
$term = $_GET[ "term" ];
$companies = array(
   array( "label" => "JAVA", "value" => "1" ),
   array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ),
   array( "label" => "JAVASCRIPT", "value" => "3" ),
   array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ),
   array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ),
   array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ),
   array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ),
   array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ),
   array( "label" => "CLOUD COMPUTING", "value" => "9" ),
   array( "label" => "DATA MINING", "value" => "10" ),
   array( "label" => "DATA WAREHOUSE", "value" => "11" ),
   array( "label" => "E-COMMERCE", "value" => "12" ),
   array( "label" => "DBMS", "value" => "13" ),
   array( "label" => "HTTP", "value" => "14" )
	
);

$result = array();
foreach ($companies as $company) {
   $companyLabel = $company[ "label" ];
	if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
      array_push( $result, $company );
   }
}

echo json_encode( $result );
?>

$(selector, context).autocomplete ("action", params);;

$( ".selector" ).autocomplete("close");

$( ".selector" ).autocomplete("destroy");

$( ".selector" ).autocomplete("disable");

$( ".selector" ).autocomplete("enable");

var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );

var options = $( ".selector" ).autocomplete( "option" );

$( ".selector" ).autocomplete( "option", "disabled", true );

$( ".selector" ).autocomplete( "option", { disabled: true } );

$( ".selector" ).autocomplete( "search", "" );

$( ".selector" ).autocomplete("widget");

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"	
            ];
            $( "#automplete-6" ).autocomplete({
               source: availableTutorials
            });
            $( "#automplete-6" ).autocomplete("option", "position",
               { my : "right-10 top+10", at: "right top" }) 
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-6">Tags: </label>
         <input id = "automplete-6">
      </div>
   </body>
</html>

$( ".selector" ).autocomplete({
   change: function( event, ui ) {}
});

$( ".selector" ).autocomplete({
   close: function( event, ui ) {}
});

$( ".selector" ).autocomplete({
   create: function( event, ui ) {}
});

$( ".selector" ).autocomplete({
   focus: function( event, ui ) {}
});

$( ".selector" ).autocomplete({
   open: function( event, ui ) {}
});

$( ".selector" ).autocomplete({
   response: function( event, ui ) {}
});

$( ".selector" ).autocomplete({
   search: function( event, ui ) {}
});

$( ".selector" ).autocomplete({
   select: function( event, ui ) {}
});

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #project-label {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
         }
         #project-icon {
            float: left;
            height: 32px;
            width: 32px;
         }
         #project-description {
            margin: 0;
            padding: 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var projects = [
               {
                  value: "java",
                  label: "Java",
                  desc: "write once run anywhere",
               }, 
               {
                  value: "jquery-ui",
                  label: "jQuery UI",
                  desc: "the official user interface library for jQuery",
               },
               {
                  value: "Bootstrap",
                  label: "Twitter Bootstrap",
                  desc: "popular front end frameworks ",
               }
            ];
				
            $( "#project" ).autocomplete({
               minLength: 0,
               source: projects,
               focus: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                  return false;
               },
					
               select: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                  $( "#project-id" ).val( ui.item.value );
                  $( "#project-description" ).html( ui.item.desc );
                  return false;
               }
            })
				
            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
               return $( "<li>" )
               .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
               .appendTo( ul );
            };
         });
      </script>
   </head>
   
   <body>
      <div id = "project-label">Select a project (type "a" for a start):</div>
      <input id = "project">
      <input type = "hidden" id = "project-id">
      <p id = "project-description"></p>
   </body>
</html>

$(selector, context).button (options);

$(selector, context).button({option1: value1, option2: value2..... });

$( ".selector" ).button({ disabled: true });

$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });

$( ".selector" ).button({ label: "custom label" });

$( ".selector" ).button({ text: false });

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-1, #button-2, #button-3, #button-4" ).button();
            $( "#button-5" ).buttonset();
         });
      </script>
   </head>
   
   <body>
      <button id = "button-1">A button element</button>
      <input id = "button-2" type = "submit" value = "A submit button">
      <a id = "button-3" href = "">An anchor</a>
      <input type = "checkbox"  id = "button-4" >
      <label for = "button-4">Toggle</label>
      <br><br>
      <div id = "button-5">
         <input type = "checkbox" id = "check1">
         <label for = "check1">Left</label>
         <input type = "checkbox" id = "check2">
         <label for = "check2">Middle</label>
         <input type = "checkbox" id = "check3">
         <label for = "check3">Right</label>
      </div>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-6" ).button({
               icons: {
                  primary: "ui-icon-locked"
               },
               text: false
            });
            $( "#button-7" ).button({
               disabled:true
            });
            $( "#button-8" ).button({
               icons: {
                  primary: "ui-icon-gear",
                  secondary: "ui-icon-triangle-1-s"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-6">
         Button with icon only
      </button>
      <button id = "button-7">
         Button Disabled
      </button>
      <button id = "button-8">
         Button with two icons
      </button>
   </body>
</html>

$(selector, context).button ("action", params);

$( ".selector" ).button("destroy");

$( ".selector" ).button("disable");

$( ".selector" ).button("enable");

var isDisabled = $( ".selector" ).button( "option", "disabled" );

$( ".selector" ).button("option");

$( ".selector" ).button( "option", "disabled", true );

$( ".selector" ).button( "option", { disabled: true } );

$( ".selector" ).button("refresh");

$( ".selector" ).button("widget");

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-9" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-seek-start"
               }
            });
            $( "#button-9" ).button('destroy');
            $( "#button-10" ).button({
               icons: {
                  primary: "ui-icon-seek-prev"
               }
            });
            $( "#button-10" ).button('disable');
            $( "#button-11" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-play"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-9">
         I'm destroyed
      </button>
      <button id = "button-10">   
         I'm disabled
      </button>
      <button id = "button-11">
         play
      </button>
   </body>
</html>

$( ".selector" ).button({
   create: function( event, ui ) {}
});

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#button-12" ).button({
               create: function() {
                  $("p#result").html ($("p#result")
                  .html () + "<b>created</b><br>");
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-12">
         A button element
      </button>
      <p class = "resultarea" id = result></p>
   </body>
</html>

$(selector, context).datepicker(options);

$(selector, context).datepicker({option1: value1, option2: value2..... });

$(".selector").datepicker(
   { altField: "#actualDate" }
);

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);

$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);

$(".selector").datepicker(
   { autoSize: true }
);

$(".selector").datepicker(
   { buttonImage: "/images/datepicker.gif" }
);

$(".selector").datepicker(
   { buttonImageOnly: true }
);

$(".selector").datepicker(
   { buttonText: "Choose" }
);

$(".selector").datepicker(
   { calculateWeek: myWeekCalc }
);

$(".selector").datepicker(
   { changeMonth: true }
);

$(".selector").datepicker(
   { changeYear: true }
);

$(".selector").datepicker(
   { closeText: "Close" }
);

$(".selector").datepicker(
   { constrainInput: false }
);

$(".selector").datepicker(
   { currentText: "Now" }
);

$(".selector").datepicker(
   { dateFormat: "yy-mm-dd" }
);

$(".selector").datepicker(
   { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
);

$(".selector").datepicker(
   { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
);

$(".selector").datepicker(
   { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
);

$(".selector").datepicker(
   { defaultDate: +7 }
);

$(".selector").datepicker(
   { duration: "slow" }
);

$(".selector").datepicker(
   { firstDay: 1 }
);

$(".selector").datepicker(
   { gotoCurrent: true }
);

$(".selector").datepicker(
   { hideIfNoPrevNext: true }
);

$(".selector").datepicker(
   { isRTL: true }
);

$(".selector").datepicker(
   { maxDate: "+1m +1w" }
);

$(".selector").datepicker(
   { minDate: new Date(2007, 1 - 1, 1) }
);

$(".selector").datepicker(
   { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
);

$(".selector").datepicker(
   { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
);

$(".selector").datepicker(
   { navigationAsDateFormat: true }
);

$(".selector").datepicker(
   {  nextText: "Later" }
);

$(".selector").datepicker(
   { numberOfMonths: [ 2, 3 ] }
);

$(".selector").datepicker(
   { prevText: "Earlier" }
);

$(".selector").datepicker(
   { selectOtherMonths: true }
);

$(".selector").datepicker(
   { shortYearCutoff: 50 }
);

$(".selector").datepicker(
   { showAnim: "fold" }
);

$(".selector").datepicker(
   { showButtonPanel: true }
);

$(".selector").datepicker(
   { showCurrentAtPos: 3 }
);

$(".selector").datepicker(
   { showMonthAfterYear: true }
);

$(".selector").datepicker(
   { showOn: "both" }
);

$(".selector").datepicker(
   { showOptions: { direction: "up" } }
);

$(".selector").datepicker(
   { showOtherMonths: true }
);

$(".selector").datepicker(
   { showWeek: true }
);

$(".selector").datepicker(
   { stepMonths: 3 }
);

$(".selector").datepicker(
   { weekHeader: "W" }
);

$(".selector").datepicker(
   { yearRange: "2002:2012" }
);

$(".selector").datepicker(
   { yearSuffix: "CE" }
);

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-1" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-1"></p>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-2" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      Enter Date: <div id = "datepicker-2"></div>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-3" ).datepicker({
               appendText:"(yy-mm-dd)",
               dateFormat:"yy-mm-dd",
               altField: "#datepicker-4",
               altFormat: "DD, d MM, yy"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-3"></p>
      <p>Alternate Date: <input type = "text" id = "datepicker-4"></p>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-5" ).datepicker({
               beforeShowDay : function (date) {
                  var dayOfWeek = date.getDay ();
                  // 0 : Sunday, 1 : Monday, ...
                  if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
                  else return [true];
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-5"></p>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-6" ).datepicker({
               showOn:"button",
               buttonImage: "/jqueryui/images/calendar-icon.png",
               buttonImageOnly: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-6"></p>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-7" ).datepicker({
               defaultDate:+9,
               dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
               duration: "slow"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-7"></p>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      
      <script>
         $(function() {
            $( "#datepicker-8" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: false
            });
            $( "#datepicker-9" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Start Date: <input type = "text" id = "datepicker-8"></p>
      <p>Enter End Date: <input type = "text" id = "datepicker-9"></p>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-10" ).datepicker({
               changeMonth:true,
               changeYear:true,
               numberOfMonths:[2,2]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-10"></p>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-11" ).datepicker({
               showWeek:true,
               yearSuffix:"-CE",
               showAnim: "slide"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-11"></p>
   </body>
</html>

$(selector, context).datepicker ("action", [params]);

$(".selector").datepicker("destroy");

$(".selector").datepicker( "dialog", "10/12/2012" );

$(".selector").datepicker("getDate");

$(".selector").datepicker("hide");

$(".selector").datepicker("isDisabled");

$(".selector").datepicker( "option", "disabled");

var options = $( ".selector" ).datepicker( "option" );

$(".selector").datepicker( "option", "disabled", true );

$(".selector").datepicker("option", { disabled: true });

$(".selector").datepicker("refresh");

$(".selector").datepicker("setDate", "10/12/2012");

$(".selector").datepicker("show");

$(".selector").datepicker("widget");

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-12" ).datepicker();
            $( "#datepicker-12" ).datepicker("setDate", "10w+1");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-12"></p>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-13" ).datepicker();
            $( "#datepicker-13" ).datepicker("show");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-13"></p>
   </body>
</html>

$(selector, context).dialog(options);

$(selector, context).dialog({option1: value1, option2: value2..... });

$(".selector").dialog(
   { appendTo: "#identifier" }
);

$(".selector").dialog(
   { autoOpen: false }
);

$(".selector").dialog(
   { buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] }
);

$(".selector").dialog(
   { closeOnEscape: false }
);

$(".selector").dialog(
   { closeText: "hide" }
);

$(".selector").dialog(
   { dialogClass: "alert" }
);

$(".selector").dialog(
   { draggable: false }
);

$(".selector").dialog(
   { height: 400 }
);

$(".selector").dialog(
   { hide: { effect: "explode", duration: 1000 } }
);

$(".selector").dialog(
   { maxHeight: 600 }
);

$(".selector").dialog(
   { maxWidth: 600 }
);

$(".selector").dialog(
   { minHeight: 200 }
);

$(".selector").dialog(
   { minWidth: 200 }
);

$(".selector").dialog(
   { modal: true }
);

$(".selector").dialog(
   { position: { my: "left top", at: "left bottom", of: button } }
);

$(".selector").dialog(
   { resizable: false }
);

$(".selector").dialog(
   { show: { effect: "blind", duration: 800 } }
);

$(".selector").dialog(
   { title: "Dialog Title" }
);

$(".selector").dialog(
   { width: 500 }
);

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-1" 
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener">Open Dialog</button>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2" ).dialog({
               autoOpen: false, 
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Success",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() {
               $( "#dialog-2" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-2"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-2">Open Dialog</button>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "puff",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-3"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-3">Open Dialog</button>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-4" ).dialog({
               autoOpen: false, 
               modal: true,
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
            });
            $( "#opener-4" ).click(function() {
               $( "#dialog-4" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-4">Open Dialog</button>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
         laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <label for = "textbox">Enter Name: </label>
      <input type = "text">
   </body>
</html>

$(selector, context).dialog ("action", [params]);

$(".selector").dialog("close");

$(".selector").dialog("destroy");

$(".selector").dialog("isOpen");

$(".selector").dialog("moveToTop");

$(".selector").dialog("open");

var isDisabled = $( ".selector" ).dialog( "option", "disabled" );

var options = $( ".selector" ).dialog( "option" );

$(".selector").dialog( "option", "disabled", true );

$(".selector").dialog( "option", { disabled: true });

$(".selector").dialog("widget");

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $("#toggle").click(function() {
               ($("#dialog-5").dialog("isOpen") == false) ? $(
                  "#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>
   
   <body>
      <button id = "toggle">Toggle dialog!</button>
      <div id = "dialog-5" title = "Dialog Title!">
         Click on the Toggle button to open and close this dialog box.
      </div>
   </body>
</html>

$(".selector").dialog (
   beforeClose: function(event, ui) {}
);

$(".selector").dialog (
   close: function(event, ui) {}
);

$(".selector").dialog (
   create: function(event, ui) {}
);

$(".selector").dialog (
   drag: function(event, ui) {}
);

$(".selector").dialog (
   dragStart: function(event, ui) {}
);

$(".selector").dialog (
   dragStop: function(event, ui) {}
);

$(".selector").dialog (
   focus: function(event, ui) {}
);

$(".selector").dialog (
   open: function(event, ui) {}
);

$(".selector").dialog (
   resize: function(event, ui) {}
);

$(".selector").dialog (
   resizeStart: function(event, ui) {}
);

$(".selector").dialog (
   resizeStop: function(event, ui) {}
);

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .invalid { color: red; }
         textarea {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-6" ).dialog({
	       autoOpen: false, 
               buttons: {
                  OK: function() {
                     $( this ).dialog( "close" );
                  }
               },
               beforeClose: function( event, ui ) {
                  if ( !$( "#terms" ).prop( "checked" ) ) {
                     event.preventDefault();
                     $( "[for = terms]" ).addClass( "invalid" );
                  }
               },
               width: 600
            });
            $( "#opener-5" ).click(function() {
               $( "#dialog-6" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-6">
         <p>You must accept these terms before continuing.</p>
         <textarea>This Agreement and the Request constitute the entire agreement of the 
         parties with respect to the subject matter of the Request. This Agreement shall be 
         governed by and construed in accordance with the laws of the State, without giving 
         effect to principles of conflicts of law.</textarea>
         <div>
            <label for = "terms">I accept the terms</label>
            <input type = "checkbox" id = "terms">
         </div>
      </div>
      <button id = "opener-5">Open Dialog</button>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-7" ).dialog({
               autoOpen: false, 
               resize: function( event, ui ) {
                  $( this ).dialog( "option", "title",
	         ui.size.height + " x " + ui.size.width );
               }
            });
            $( "#opener-6" ).click(function() {
               $( "#dialog-7" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-7" title = "Dialog Title goes here..."
         >Resize this dialog to see the dialog co-ordinates in the title!</div>
      <button id = "opener-6">Open Dialog</button>
   </body>
</html>

_allowInteraction: function( event ) {
  return !!$( event.target ).is( ".select2-input" ) || this._super( event );
}

$(selector, context).menu (options);

$(selector, context).menu({option1: value1, option2: value2..... });

$( ".selector" ).menu (
   { disabled: true }
);

$( ".selector" ).menu (
   { icons: { submenu: "ui-icon-circle-triangle-e" } }
);

$( ".selector" ).menu (
   { menus: "div" }
);

$( ".selector" ).menu (
   { position: { my: "left top", at: "right-5 top+5" } }
);

$( ".selector" ).menu (
   { role: null }
);

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      
      <script>
         $(function() {
            $( "#menu-1" ).menu();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-1">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-2" ).menu({
               icons: { submenu: "ui-icon-circle-triangle-e"},
               position: { my: "right top", at: "right-10 top+5" }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-2">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

$(selector, context).menu ("action", params);;

$(".selector").menu( "blur" );

$(".selector").menu( "collapse" );

$(".selector").menu( "collapseAll", null, true );

$(".selector").menu( "destroy" );

$(".selector").menu( "disable" );

$(".selector").menu( "enable" );

$(".selector").menu( "expand" );

$(".selector").menu( "focus", null, menu.find( ".ui-menu-item:last" ) );

$(".selector").menu( "isFirstItem" );

$(".selector").menu( "isLastItem" );

$(".selector").menu( "next" );

$(".selector").menu( "nextPage" );