A Glance at the jQuery UI

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!



Related Articles

Comments

  • Jquery all function at a glance with examples, jQuery post, jQuery animate, jquery toggle, jQuery load, jQuery get. jQuery attr

    Posted by Raj on 01/09/2013 08:31pm

    Codeguru is good site. thanks, he help us with example for refrance in jquery http://jquery-functions.blogspot.in/

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
  • The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
  • Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date