CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Every web developer has a good impression of jQuery for performing the client side operations, doing asynchronous javascript calls and traversing through elements on a web page due to its stability and ease of use. Similarly, a library called jQuery UI, which works on top of the jQuery library providing more in-built features has been made available to web developers. It doesn’t stop with in-built items but also allows you to extend or create custom UI features. In this article I will discuss the features that jQuery UI provides and share code samples for a couple of the most useful items.
jQuery UI is completely open source and can be downloaded from here. Documentation and demos for jQuery UI are available here.
jQuery UI Classifications
jQuery UI is classified into four different categories. This classification is based on what category the UI feature falls under.
Interactions
These features help the developer in implementing functionalities that improve the user interactions on the web page. Some of the features are:
1. Draggable – Allows a particular HTML element to be dragged over the web page.
2. Droppable – Allows a particular HTML element to be dropped on to another element. The developer can also specify which elements can accept what.
3. Sortable – Makes a set of child elements sortable. The users can now drag drop the list items and create their own order.
Widgets
This category would draw the interest of most web developers because it ingrains new UI elements. These UI elements solve most of the pain for developers as it reduces the size of code and eliminates messy logics. Below are some of the useful UI widgets provided by jQuery UI.
1. Dialog – To show pop ups and themed alerts
3. Accordion – Containers with expand and collapse options
4. Date picker
5. Tabs
6. Progress bar
Effects
These features can be used to perform animations and make the client UI rich. The developer can include his animation effect while showing an element or popping up a dialog window or including some transition effects.
Utilities
The utilities can be used to extend all the above mentioned categories like creating a new effect, a new widget or a new interaction feature. Also there is a feature called Position, which is used to alter the element positions in an easy and effective way. I haven’t explored the features under this category much.
Code Samples – Widgets
In this section I will provide the code samples for a couple of jQuery UI widgets.
AutoComplete Widget
This widget will assist the developer in implementing the auto complete functionality for a text box with minimum effort. Below is the sample code.
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jQuery UI Samples</title> <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var countries = [ "America", "England", "Austalia", "Austria", "India", "Egypt", "Israel", "South Africa", "Brazil" ]; $("#txtCountry").autocomplete({ source: countries, minLength: 2, delay: 1000 }); }); </script> </head> <body> Country: <input type="text" id="txtCountry" /> </body> </html>
Date Picker Widget
Most web applications involve date fields and the developers can have hard time in accepting the input and validating it. The jQuery UI date picker widget simplifies the work to a great extent and provides a nice way for the users to select the dates.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery UI Samples</title> <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#txtDate").datepicker(); }); </script> </head> <body> Date: <input type="text" id="txtDate" /> </body> </html>
On a generic note jQuery UI provides options to apply default, or your own themes to the widgets. I hope this article gives you a jump start with the jQuery UI component.
Happy reading!
