JQuery UI Menu

The last tutorial explained how to turn an ordinary element to date picker element. This tutorial explains how to convert an html element and its child elements to menu. A menu is basically a set of links or buttons that are tabbed together. A menu groups related html elements. For instance most of the websites have main menu which contains links to Home, About, Services and Contact pages etc. Jquery UI menu function allows developers to convert an ordinary element and its contents to menus. To create menus, simply call menu() function with or without optional parameters on any input element which you want to convert to menu. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Menu</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
         $(function() {
           
             $( "#main-menu" ).menu();
         });
      </script>
       
       <style>
         .ui-menu {
            width: 300px;
         }
      </style>
   </head>
   <body>

      <ul id="main-menu">
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Services</a>
            <ul>
               <li><a href="#">Web Development</a></li>
               <li><a href="#">Mobile Development</a></li>
               <li><a href="#">.NET Development</a></li>
            </ul>
         </li>
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </body>
</html>

Download Code Run Code

The above webpage contains an un-ordered list which contains some li elements. One of the child li element further contains an un-ordered list with li elements. The outer ul list has id “main-menu”. In the script, this element is selected via id and menu() function is called on it. This makes the ul list and its li child a menu. You can click on the list item and if they contain any child, they will pop-up.

Menu with Optional Parameters

You can also pass additional optional parameters to the menu() function to change the behavior and position of the menu. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example optional parameters icon is passed to menu function. The icon specifies the icon to use for sub-menu. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Menu With Optional Parameters</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
         $(function() {
           
             $( "#main-menu" ).menu({
                  icons: { submenu: "ui-icon-home"},
             });
         });
      </script>
       
       <style>
         .ui-menu {
            width: 300px;
         }
      </style>
   </head>
   <body>

      <ul id="main-menu">
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Services</a>
            <ul>
               <li><a href="#">Web Development</a></li>
               <li><a href="#">Mobile Development</a></li>
               <li><a href="#">.NET Development</a></li>
            </ul>
         </li>
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </body>
</html>

Download Code Run Code

JQuery UI Datepicker

One of the fundamental goals of any website you develop is to provide ease of use to the visitor. JQuery UI provides such widgets which makes life of your visitor easier when they interact with your website. One such widget is the datepicker widget. Datepicker allows visitor to select a date from a calendar-style element instead of typing the date manually into some input element. JQuery UI datepicker function allows developer to make any input,div, span or any other element act like a datepicker. Simply call datepicker() function with or without optional parameters on any element which you want to ct like a date picker. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Autocomplete</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
         $(function() {
           
             $( "#date-picker" ).datepicker();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class="ui-widget">
         
        <p>Select Date: <input id="date-picker"></p>
      </div>
   </body>
</html>

Download Code Run Code

The above webpage contains an input element with id “date-picker”. The JQuery factory function selects this element. Inside the script, the datepicker() function is called on this element which makes it act like a date picker control. If you open the page in the browser and select the input box, you will see a calendar appear. If you select any date from calendar, you will see it pops up in the text box in text form.

Datepicker with Optional Parameters

You can also pass additional optional parameters to the datepicker() function to change format or behavior of the datepicker control. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example optional parameters dateFormat and appendText are used to change the format of the date and the text appended with the control. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Datepicker with Optional parameters</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
         $(function() {
           
             $( "#date-picker" ).datepicker({
                 
                appendText:"(dd-mm-yy)",
               dateFormat:"dd-mm-yy"
             });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class="ui-widget">
         
        <p>Select Date: <input id="date-picker"></p>
      </div>
   </body>
</html>

Download Code Run Code

If you click the text box, you will see date picker appear. Now if you select the date, you shall see that date will appear in the format you specified as a parameter to datepicker() function.

JQuery UI Button

Buttons are one of the most important elements of any webpage. Whether it is form submission or any other user interactive task, buttons are the widely used. To style a button, we need to write quite a button of css script. however JQuery UI has simplified button styling extremely. JQuery UI button functions allow developers to easily style buttons in their applications. In this article we shall see two button functions i.e. button() and buttonset(). Simply call button() function with or without optional parameters on any element which you want to style like a button. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Button</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
          
        $(function() {
            $( "#button-element, #input-tag, #anchor-tag").button();
            $( "#button-set" ).buttonset();
         });
          
      </script>
       
   </head>
    
   <body>
       
    <button id="button-element">This is a button</button>
      <input id="input-tag" type="submit" value="This is submit button">
      <a id="anchor-tag" href="">This is anchor tag</a>
      
      <br><br>
      <div id="button-set">
         <input type="checkbox" id="cb1">
         <label for="cb1">Approve</label>
         <input type="checkbox" id="cb2">
         <label for="cb2">Reject</label>
         <input type="checkbox" id="cb3">
         <label for="cb3">Pending</label>
      </div>
       
   </body>
</html>

Download Code Run Code

In the above code different html elements have been styled as button. The button element, the input element and anchor elements are styled as button. Next buttonset() function is styling all the buttons in the form of a set of buttons. The buttons to be included in the set are defined inside a div. This div is selected and the buttonset() function is used to style.

Using Button Icons and Text

You can also pass optional parameters to the button() and buttonset() function to change the look and feel of button elements. The parameters are passed inside the curly brackets with each parameter separated by a comma. The following example demonstrates how to use icons and texts on the buttons.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Button</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
          
           $(function() {
            $( "#icon-button" ).button({
               icons: {
                  primary: "ui-icon-home"
               },
               text: false
            });
            $( "#disabled-button" ).button({
               disabled:true
            });
            $( "#button-2" ).button({
               icons: {
                  primary: "ui-icon-calculator",
                  secondary: "ui-icon-search"
               }
            });
         });
      
          
      </script>
       
   </head>
    
   <body>
       
       <button id="icon-button">
         Icon Button
      </button>
      <button id="disabled-button">
         Disabled Button
      </button>
      <button id="button-2">
        2 Icon button
      </button>
   
       
   </body>
</html>

If you open the above page, you will see three buttons. First button will have home icon. Second button will be disabled while the third button will have text in the center and two icons. The right side will contain search icon and the left side will contain calculator icon.Button functions are extremely handy and can be used to improve the look and feel of button type elements on the page.

Download Code Run Code

JQuery UI Autocomplete

If you go to google.com and search for anything you see that google gives you suggestions before you type complete search query. This suggestion feature is known as autocomplete in web development terms. It is a very handy way of suggesting the visitor of the website what they are looking for. It also helps avoid wrong inputs if you limit that user must select one of the values from the suggestions. JQuery UI autocomplete function allows developers to implement autocomplete feature in their applications.

Simply call autocomplete() function with or without optional parameters on any input element which you want to have autocomplete functionality. You also need to pass the list or the source from where this element takes suggestions as a parameter to autocomplete function. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Autocomplete</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
         $(function() {
            var AllCars = [
               "Honda",
               "Toyota",
               "BMW",
               "Ford",
                "Suzuki",
                "McLaren"
            ];
            $( "#cars-input" ).autocomplete({
                
               source: AllCars
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class="ui-widget">
         <p>Search Cars</p>
         <label for="cars-input">Tags: </label>
         <input id="cars-input">
      </div>
   </body>
</html>

Download Code Run Code

The above code contains an input element with id “cars-input”. If you look at the script, an array named “AllCars” contains names of different cars. This will serve as a value for the source parameter of the autocomplete() function. The autocomplete function has been called on the element with id “cars-input”. Now if you open the above page in browser and type any thing in the text box, you will see related suggestions pop-up in under the text box. This is how JQuery UI implements autocomplete feature.

Autocomplete with Optional Parameters

You can also pass additional optional parameters to the autocomplete() function to change the behavior of suggestions. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example optional parameters delay and minLenght are passed to the autocomplete function. The minLenght specified number of characters to enter before suggestions pop-up. Similarly delay specifies the time in milliseconds after suggestions appear. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Autocomplete with Optional Parameters</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
         $(function() {
            var AllCars = [
               "Honda",
               "Toyota",
               "BMW",
               "Ford",
                "Suzuki",
                "McLaren"
            ];
            $( "#cars-input" ).autocomplete({
               minLength:2,   
               delay:1000,
               source: AllCars
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class="ui-widget">
         <p>Search Cars</p>
         <label for="cars-input">Tags: </label>
         <input id="cars-input">
      </div>
   </body>
</html>

Download Code Run Code

JQuery UI Accordion

Accordion is a widget groups multiple sections of webpage. By default usually one of the sections is expanded by default and rest of the sections are collapsed with only heading or title visible. When a user clicks the heading, that section expands and other sections are collapsed. This behavior can be customized though. JQuery UI accordion function allows developers to easily create according menus in their applications. To implement accordion menu in your application simply call the accordion() function with or without parameters on the element which you want acting as according menu. The following example will make it more clear.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Accordion</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script>
         $(function() {
            $( "#main-menu" ).accordion();
         });
      </script>

    <style>
        #main-menu{
            font-size: 15px;
            width: 50%;
            margin: 0 auto;
        }
        
        #main-menu .ui-accordion-header
        { 
            background-color: cornflowerblue;
    
        }
    
    </style>
     
   </head>
   <body>
      
   <div id="main-menu">
      <h3>Web Design</h3>
     
          <p>
          Vivamus eu urna tellus. Mauris id lectus imperdiet erat venenatis iaculis ut quis dui. Nullam nibh velit, ornare ut ante ut, commodo laoreet est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam nec eros erat. Aenean nibh leo, molestie vitae turpis in, pharetra cursus nulla. Vivamus vestibulum euismod purus pulvinar iaculis. Aenean consectetur non nisi non auctor. 
          </p>
      
       <h3>Web Development</h3>
      
          <p>
            Vestibulum justo risus, vehicula vitae interdum id, vestibulum non arcu. Nulla quis iaculis odio, quis malesuada erat. Suspendisse libero enim, rhoncus at rutrum ut, commodo non est. Nulla ullamcorper nunc sit amet egestas interdum. Aliquam eget leo nisi. Maecenas non ex sed urna mattis interdum. Nullam mattis dui eget rutrum lacinia. Praesent scelerisque nisi id blandit efficitur. Integer ac lorem sem. Ut dignissim nunc vitae dolor fermentum laoreet a a risus.    
          </p>
       
       <h3>Mobile Development</h3>
       
          <p>
            Morbi sit amet facilisis magna, sed viverra sapien. Nullam aliquet fringilla efficitur. Donec vel elementum lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eget venenatis arcu. Ut felis dui, condimentum eget pretium at, imperdiet at lorem. In mi dui, lobortis in odio vitae, sollicitudin finibus mi. Aliquam aliquam dolor ac sagittis venenatis.    
          </p>
     
   </div>
       
   </body>
</html>

Download Code Run Code

The above webpage contain an outer div with id “main-menu”. Inside the div there are three h3 elements.Each h3 element is followed by a paragraph. Here h3 element act as header. By default the first paragraph element visible. For the next two paragraphs, only the heading will be visible. Now, if you click the second heading, the first paragraph will be collapsed and the paragraph after the second heading will expand.

Accordion with Optional Parameters

You can also pass optional parameters to the accordion() function to change the behavior of the accordion element. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example an optional parameter of collapsible with value true is passed to the accordion() function. By default, clicking an open section doesnt collapse it. However with collapsible property set to true, you can collapse an open section by clicking its header. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Accordion with Optional Parameter</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script>
         $(function() {
            $( "#main-menu" ).accordion({
               collapsible: true
            });
         });
      </script>

    <style>
        #main-menu{
            font-size: 15px;
            width: 50%;
            margin: 0 auto;
        }
        
        #main-menu .ui-accordion-header
        { 
            background-color: cornflowerblue;
    
        }
    
    </style>
     
   </head>
   <body>
      
   <div id="main-menu">
      <h3>Web Design</h3>
     
          <p>
          Vivamus eu urna tellus. Mauris id lectus imperdiet erat venenatis iaculis ut quis dui. Nullam nibh velit, ornare ut ante ut, commodo laoreet est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
          </p>
      
       <h3>Web Development</h3>
      
          <p>
            Vestibulum justo risus, vehicula vitae interdum id, vestibulum non arcu. Nulla quis iaculis odio, quis malesuada erat. Suspendisse libero enim, rhoncus at rutrum ut, commodo non est. Nulla ullamcorper nunc sit amet egestas interdum.    
          </p>
       
       <h3>Mobile Development</h3>
       
          <p>
            Morbi sit amet facilisis magna, sed viverra sapien. Nullam aliquet fringilla efficitur. Donec vel elementum lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eget venenatis arcu.  
          </p>
     
   </div>
       
   </body>
</html>

Download Code Run Code

JQuery UI Sortable

Last article covered how to select elements on webpage via JQuery UI selectable(). In this article we shall see how to sort html elements using JQuery UI Sortable method. The sortable() method allows user to click any element and sort it by placing it at any position among the list of sortable elements.The rest of the sort-able elements adjust their positions accordingly. Simply call sortable() function with or without optional parameters on any element which you want to make sort-able. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Sortable</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script>
         $(function() {
            $( "#list" ).sortable();
         });
      </script>
    <style>
      
         #list { 
             list-style-type: none;
             margin: 5px; 
            padding: 2px; 
             width: 10%;
        }
         #list li
        {
            margin: 5px; 
            padding: 0.5em; 
            font-size: 18px;
            height: 18px; 
        }
         .button {
            background-color: cornflowerblue;
            border: 1px solid #DDDDDD;
            color: #fff;
         }
      </style>
     
   </head>
   <body>
       <h1>Sort the fruits by clicking and dragging</h1>
      <ol id="list">
         <li class="button">Apple</li>
         <li class="button">Mango</li>
         <li class="button">Banana</li>
         <li class="button">Orange</li>
         <li class="button">Guava</li>
      
      </ol> 
   </body>
</html>

Download Code Run Code

The above contains a list of 5 fruits which you can select by simply clicking on it. To sort the element,simply click and place it on the position of other element. For instance click the first fruit, drag it and place it at the position of third fruit in the list, you will see the 3rd and 2nd fruit moving to 2nd and first positions respectively. If you look at the script you will see that the selectable() function is called on the element with id ‘#list’. The “ol” list has this id. This means that all the elements inside this list will become sortable as well.

Sortable with Optional Parameters

You can also pass optional parameters to the sortable() function to change the behavior of the sorting of the elements. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example an optional parameter of distance with value 50 is passed to the sortable() function. To start dragging the element in order to sort it user will first have to click the element and drag the mouse 50 pixel in any direction.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Sortable with Optional Parameters</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script>
         $(function() {
            $( "#list" ).sortable({
                distance: 50
            });
         });
      </script>
    <style>
      
         #list { 
             list-style-type: none;
             margin: 5px; 
            padding: 2px; 
             width: 10%;
        }
         #list li
        {
            margin: 5px; 
            padding: 0.5em; 
            font-size: 18px;
            height: 18px; 
        }
         .button {
            background-color: cornflowerblue;
            border: 1px solid #DDDDDD;
            color: #fff;
         }
      </style>
     
   </head>
   <body>
       <h1>Sort the fruits by clicking and dragging</h1>
      <ol id="list">
         <li class="button">Apple</li>
         <li class="button">Mango</li>
         <li class="button">Banana</li>
         <li class="button">Orange</li>
         <li class="button">Guava</li>
      
      </ol> 
   </body>
</html>

Download Code Run Code

JQuery UI Selectable

From the last three articles, we have been looking at some of the most useful features of JQuery UI. We studied, Draggable, Droppable and Resizeble funtions in the last articles. This article explains JQuery UI selectable function. This function allows one or more elements be select-able with the mouse click. You can select one element with a single click as well as multiple elements by pressing control key and clicking different elements. Simply call selectable() function with or without optional parameter on any element which you want to make selectable. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Selectable</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script>
         $(function() {
            $( "#list" ).selectable();
         });
      </script>
    <style>
         #list .ui-selecting { background: #707070 ; }
         #list .ui-selected
        { background-color: darkgray; 
             color: #000000; }
         #list { 
             list-style-type: none;
             margin: 5px; 
            padding: 2px; 
             width: 10%;
        }
         #list li
        {
            margin: 5px; 
            padding: 0.5em; 
            font-size: 18px;
            height: 18px; 
        }
         .button {
            background-color: cornflowerblue;
            border: 1px solid #DDDDDD;
            color: #fff;
         }
      </style>
     
   </head>
   <body>
       <h1>Select Fruits to Buy</h1>
      <ol id="list">
         <li class="button">Apple</li>
         <li class="button">Mango</li>
         <li class="button">Banana</li>
         <li class="button">Orange</li>
         <li class="button">Guava</li>
      
      </ol> 
   </body>
</html>

Download Code Run Code

The above contains a list of 5 fruits which you can select by simply clicking on it. You can also select multiple fruits by pressing control and clicking on multiple list items. If you look at the script you will see that the selectable() function is called on the element with id ‘#list’. The “ol” list has this id. This means that all the elements inside this list will become select-able as well.

Selectable with Optional Parameters

You can also pass optional parameters to the selectable() function to change the behavior of the selection of the elements. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example an optional parameter of distance with value 30 is passed to the selectable() function. To select the element user will have to click the element and drag the mouse 30 pixel in any direction.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Selectable with Parameters</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script>
         $(function() {
            $( "#list" ).selectable({
               distance : 30
            });
         });
      </script>
    <style>
         #list .ui-selecting { background: #707070 ; }
         #list .ui-selected
        { background-color: darkgray; 
             color: #000000; }
         #list { 
             list-style-type: none;
             margin: 5px; 
            padding: 2px; 
             width: 10%;
        }
         #list li
        {
            margin: 5px; 
            padding: 0.5em; 
            font-size: 18px;
            height: 18px; 
        }
         .button {
            background-color: cornflowerblue;
            border: 1px solid #DDDDDD;
            color: #fff;
         }
      </style>
     
   </head>
   <body>
       <h1>Select Fruits to Buy</h1>
      <ol id="list">
         <li class="button">Apple</li>
         <li class="button">Mango</li>
         <li class="button">Banana</li>
         <li class="button">Orange</li>
         <li class="button">Guava</li>
      </ol> 
   </body>
</html>

Download Code Run Code

JQuery UI Resizeable

The last article explained the process of making an element drag-able and drop-able. You can also change the size of the html element at run time using the JQuery UI resizeable function. To make an element resizezble, you simply have to select the element and call resizeable() function on that element. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Resizeable</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
     $(function() {
        $( "#square" ).resizable();
     });
  </script>

    <style>
         .outer {
            background-color: darkturquoise;
            border: 1px solid #b9cd6d;
            color: #CCC;
            font-weight: bold;
         }
         .inner{
            background-color: aliceblue;
            border: 1px solid #000;
            color: #111;
         }
         #square 
        { width: 200px; 
        height: 200px; 
        padding: 0.5em;
        text-align: center;
        margin: 0; 
        }
        
      </style>
      <!-- Javascript -->
    
   </head>

   <body>
      <!-- HTML --> 
      <div id="square" class="outer"> 
         <h3 class="inner">To resize, pull edges.</h3>
      </div>
  </body>
</html>

Download Code Run Code

The above html code will result in a page which contains a blue box. If you look at the bottom right corner of the box, you should see a small black icon. This shows that this box is resizeable. Now if you click at any edge of the box and pull it, you should see box resizing itself.

Resizeable with Additional Parameters

As said earlier optional parameters can be passed to resizeable() function in order to create additional effects while resizing the element. The following example demonstrates how additional parameters are passed to resizeable() function to create additional affects.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Resizeable with Parameters</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
     $(function() {
        $( "#square" ).resizable({
            animate: true
        });
         
        $( "#square2" ).resizable({
            ghost: true
        });
     });
  </script>

    <style>
         .outer {
            background-color: darkturquoise;
            border: 1px solid #b9cd6d;
            color: #CCC;
            font-weight: bold;
         }
         .inner{
            background-color: aliceblue;
            border: 1px solid #000;
            color: #111;
         }
         #square, #square2 
        { width: 200px; 
        height: 200px; 
        padding: 0.5em;
        text-align: center;
        margin: 0; 
        }
        
      </style>
      <!-- Javascript -->
    
   </head>

   <body>
      <!-- HTML --> 
      <div id="square" class="outer"> 
         <h3 class="inner">To resize, pull edges.</h3>
      </div>
       
       <br/>
       
        <div id="square2" class="outer"> 
         <h3 class="inner">To resize, pull edges.</h3>
      </div>
  </body>
</html>

Download Code Run Code

The above webpage will contain two resizeable divs. These div elements are styled to look like squares. The “animate” parameter is passed to the resizeable() function of the upper square. Similarly, “ghost” is passed as parameter to the second square. Now, if you resize upper square by pulling its edges you shall see that the resizing takes place in the form of animation. Similarly, resizing the second square by pulling its edges creates a shadow like effect. This is called ghost effect. When you release the mouse, the element is resized to the length of the shadow created.

JQuery UI Draggable-Droppable

In this article and the rest of the articles in this series, we shall explore one of the most popular JQuery framework i.e. JQuery UI. You might want to drag elements on your screen with the help of your mouse, you may also want to drop your one div element to other and so on and so forth. JQuery, provides such functionalities. This article explains how you can make any HTML drag-able and drop-able using JQuery UI draggable-droppable functions. By drag-able element, we mean any element which can be dragged on the screen with the help of mouse. Drop-able element is any element where any drag-able element can be placed.

To use JQuery UI in your webpages add the following lines of code in the head section under the link to JQuery.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

JQuery UI Draggable

To make any element drag-able, select the element and simply call draggable() function on the element. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Draggable</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    
    <script type = "text/javascript">
        
         $(function() {
            $( ".circle" ).draggable();
         });
      </script>
    
     <style>
      
         .circle{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            border-radius: 100%;
            margin: 25px;
         }
      </style>
     
   
</head>
    
<body>

    <h1>Click and Drag</h1>
 <div class = "circle">
      </div>
    
    
    
</body>

</html>

Download Code Run Code

The above code contains a circle with class circle. In the scripts section in the header you can see that draggable() function is called on the elements with class circle. You can drag this circle anywhere on the screen.

JQuery UI Droppable

Elements that are draggable can also be dropped into other elements. Such elements where other elements can be dropped are called droppable. To make any element droppable simply select the element and call droppable function on it. You can also pass optional parameters to the droppable element. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Droppable</title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    
    <style>
         #small { 
           width: 150px;
             height: 150px;
             border-radius: 100%;
             padding: 25px;
             border-radius: 100%;
             text-align: center;
         }
         #large { 
           width: 200px;
             height: 200px;
             padding: 25px;
             border-radius: 100%;
             text-align: center;
         }
      </style>
      <script>
         $(function() {
            $( "#small" ).draggable();
             
            $( "#large" ).droppable({
            drop: function( event, ui ) {
               $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Circle Dropped" );
            }
            });
         });
      </script>
   </head>
   <body>
      <div id="small" class="ui-widget-content">
         <p>Drag me to my big circle</p>
      </div>
      <div id="large" class="ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Download Code Run Code

When you run the above code, you shall see a small grey circle which is draggable and a large orange circle which is droppable. When you drag the small circle and drop it onto the big circle, you will see the color of big circle turning light. This means the element has been successfully dropped.

JQuery Ajax Get

In the last article we saw what Ajax is and how it works. We saw how Load method was used to asynchronously load data from any resource on the server without complete page load. There are other ways to get data asynchronously from server via Ajax. JQuery contains Ajax Get and Post method for such purposes. This article provides a brief introduction to both Get method.

Ajax Get Function

The get() function in JQuery requests data from any particular source on the server. This resource can be a JSON object, a text document or virtually anything. The get() method uses HTTP get request to request data from a server. It is important to note that get method may also return already cached data. The get() method takes two arguments: first one is the URL of the resource you want to request from the server and the second parameter is the call back function. Take a look at following example.

First create a file “paracontent.txt” and add the following content to this file.

This is the text loaded via

Ajax

call.

The get() method will load the content from this file and will place it inside the paragraph element. The complete code for the webpage including JQuery Ajax get() call is shown below.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Ajax Load</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
        
    $(document).ready(function(){
        $('#b1').click(function(){
           
            $('p').load('paracontent.txt', function(){
                alert('Content has been loaded');
            });
        });
    });
        
      </script>
     
   
</head>
    
<body>

    
      <button id="b1">Click to load Text via Ajax.</button>
    
    <p>This is random text</p>
    

    
    
    
</body>

</html>

Download Code Run Code

The above code contains a button and a paragraph. Button click fires an event. JQuery click event handler handles this event. Inside the event handler get function executes and retrieves data from a text file. JQuery factory function selects paragraph and sets the html of the paragraph to the data returned by the server. As a result, when user clicks the button, the content of the paragraph elements are updated asynchronously via Ajax.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .