It provides advanced:

From the jQuery UI homepage, you have many choices:

From this page http://jqueryui.com/themeroller/, you can:

Finally, you need to include the CSS and the library in the HTML file.

<link href="jquery-ui-1.8.10.custom.css" type="text/css" rel="stylesheet"/>
<script src="libs/jquery-ui-1.8.10.custom.min.js"></script>

	Note
	Do not forget to include the images folder included with the theme, this folder and the CSS should be contained in the same folder.

jQuery UI provides you a lot of cool UI widgets that:

The Accordion widget turns this part of the page into an accordion widget where only one section can been seen at a time:

Of course, you could implement your own accordion using the core jQuery library, however the Accordion widget gives you a lot of options, including:

The container that is being turned into an accordion must contain pairs of "headers" along with their sections like this:

<div id="accordion">
    <h3><a href="#">First header</a></h3> 
    <div>First content</div> 
    <h3><a href="#">Second header</a></h3> 
    <div>Second content</div> 
</div>

As soon as you have the right markup, you are ready to apply the accordion to the main element containing header/section pairs (here in this example: <div id="accordion">):

$('#accordion').accordion({ header:'h3' }); // 

Tabs are used to separate the content in different sections while saving space on the page, and allows users to easily switch from one section of content to another.

Let us take a look at this example:

<div id="tabs">
    <ul> 
        <li><a href="#tabs-1">First</a></li> 
        <li><a href="#tabs-2">Second</a></li> 
        <li><a href="#tabs-3">Third</a></li> 
    </ul>
    <div id="tabs-1"> 
      Lorem ipsum dolor....
    </div>
    <div id="tabs-2"> 
      Phasellus mattis tincidunt...
    </div>
    <div id="tabs-3"> 
      Nam dui erat...
      </div>
</div>

Now on the JavaScript side, you would just have to call the .tab() method on the element containing the tabs and content:

$('#tabs').tabs();

There are a lot of options for this Tab widget that can be found at http://jqueryui.com/demos/tabs/#options

The following are the events that you can use to listen on the Tabs widget:

Tabs can also load content dynamically using Ajax.

jQuery UI provides you with the ability to easily create dialogs (modal and non-modal dialogs).

	Note
	The difference between a modal and a non-modal dialog is that a modal dialog prevents the user from interacting with the rest of the page until it is closed.

A non-modal dialog looks like this in jQuery UI:

A dialog is created from a <div> element having a title attribute representing the title of the window.

<div id="dialog" title="Basic dialog">
    <p>Welcome on Yamba</p>
    <p>Yet Another Micro-blogging App</p>
</div>

Next, using jQuery UI, we can quickly turn this <div> element into a basic non-modal dialog:

$('#dialog').dialog(); // 

This example will show you how to create a modal confirmation dialog using the following HTML markup:

$( "#confirm" ).dialog({
    title: "Delete Tweet", // 
    resizable: false, // 
    modal: true, // 
    buttons: { // 
        "Yes": function() {
            $(this).dialog("close"); // 
            alert("You clicked on yes");
        },
        "No": function() {
            $(this).dialog("close");
            alert("You clicked on no");
        }
    }
});

This would produce the following result:

jQuery UI comes with new controls that can be used in your form, such as:

The drawbacks of creating these controls yourself:

The Datepicker:

In the HTML code, create a normal input:

<input type="text" id="datepicker">

Then on the JavaScript side using jQuery UI, you would do the following:

$("#datepicker").datepicker();

This date picker is highly customizable. You can:

The jQuery UI .slider() method turns a <div> element into a slider:

Figure 1. title

On the HTML side, you would create an empty <div> element with an id like this:

<div id="slider"></div>

On the JavaScript side, you would have to apply the .slider() method to the <div> like this:

$( "#slider" ).slider();

There are of course a lot of options that you can configure here, such as having multiple handles and ranges, specifying the range, etc…

	Note
	Those handles can be moved with the mouse as well as with the direction key from the keyboard

There are also some events that you can use to listen. Event handlers receive two parameters:

The progress bar is a good visual way to show the state of completion for a process (percentage of completion):

To create a progress bar, you need to first create the HTML structure like this:

<div id="progressbar"></div>

Using jQuery UI and the .progressbar() method, you can quickly turn this structure into a jQuery UI widget:

$("#progressbar").progressbar({
  value: 50
});

Using jQuery UI you can make your elements:

This is what you can do with a "draggable" element (An element that a user moves):

This is what you can do with a "droppable" element (an element that "receives" the "draggable" element):

You can also listen for events:

This will be our HTML:

<div class="draggable"> 
  <p>An element to drag on the page</p>
</div>

<div class="draggable"> 
  <p>An element to drag on the page</p>
</div>

<div id="droppable"> 
  <p>Drop element here</p>
</div>

Time to add draggable and droppable interactions to these elements:

$('.draggable').draggable({ // 
    distance:20, // 
    opacity:0.7, // 
    zIndex:1000, // 
    revert:'invalid' // 
});

//Make the trash being droppable
$('#droppable').droppable({ // 
    accept:'.draggable', // 
    activeClass:'ui-state-hover', // 
    hoverClass:'ui-state-active', // 
    tolerance:'pointer', // 
    drop: function(event,ui) { // (11)
        var $element = ui.draggable; // (12)
        $element.fadeOut('slow',function() {
            $(this).remove();
        });
    }
});

Take for example, an HTML list like this one:

<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Next, to make the list items sortable, you would have to use the .sortable() method:

$('#sortable').sortable(); // 

Using jQuery UI, you can enable an element or a group of elements to be selectable.

Imagine an HTML list like this one:

<ul id="selectable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Then to make the list items selectable, you would have to use the .selectable() method:

$('#selectable').selectable(); // 

jQuery provides you the ability to resize any DOM element by calling the .resizable() method on this element. Of course, you can specify more options:

Let us take the following HTML structure as an example:

<div id="resizable">
  <!-- Content of the div -->
</div>

Using jQuery, you can make this element to be resizable:

$(#resizable).resizable(); // 

jQuery UI adds a lot more functionality for animations. It adds:

jQuery UI also extends existing methods such as: