In previous articles, we covered basics of JQuery. In this series, we will cover one of the plug-in of JQuery called as JQuery UI. JQuery UI extends the JQuery library to provide rich user interface with widgets, effects and interactions. We can download JQuery UI needed components from http://jqueryui.com/download. There will two versions available, one is the latest and other is stable one having fixes for the known bugs. We will work on stable version which is currently 1.7.2. Along with the components, we can specify the theme to be used for those. I will be using "Sunny" theme and downloaded all components as shown below:

After downloading, extract the files to a folder "jquery-ui-1.7.2". JQuery UI 1.7.2 is built on top of JQuery library 1.3.2. So, we will be using this version of JQuery library for the demos. Now, we will have a look at folder's structure:

css folder will have the selected theme's CSS and images. js folder will have JQuery library and its UI .js files. development-bundle folder contains demo and documentation for the components and scripts for effects. Index.html will have sample of all UI components.

The components of JQuery UI are:

Core: It's a perquisite for other widgets and effects to work properly.

Interactions: It allows us to add behavior like Draggable, Droppable, Sortable etc on the UI elements.

Widgets: It provides UI controls like tabs, dialog, slider etc.

Effects: It provides ready to use effects like clip, bounce, explode etc.

We will cover all these components in depth in coming articles. JQuery UI supports variety of browsers like IE6, 7, 8, Firefox, Opera etc. This library is licensed under MIT and GPL open-source licenses. So, we are free to include it in our code and build applications.