Using jQuery UI to Your Advantage

Hundreds of third-party JavaScript libraries aim to help you write Web applications quickly. However, jQuery UI stands out as a means for creating interesting user interfaces that work well across platforms and browsers without any hiccups. This introduction shows how this library can help you write flexible applications fast.

It’s rare to find a software developer who doesn’t rely on at least a few APIs. Developers simply don’t have time to write all the code required to create an application by hand. Despite that adage about not reinventing the wheel — especially when it comes to the difficult parts of application development, such as the user interface – third-party libraries come with risks. You need to know that the library works as advertised, provides reliable results, and doesn’t carry undo security risks. Ensuring that the provider will be around next week and has a good reputation is also a requirement.

jQuery UI answers all four of these requirements (and more). What you get is a third-party library that adds plenty of pizzazz to your site, is fully configurable, has great documentation, and still answers all of a developer’s basic needs.

Accessing jQuery UI

Before you can do anything with a third-party library, you need to know how to access it. There are a number of ways to access jQuery UI, and the best way is to do so directly. That ensures that you have access to the latest version of jQuery UI, complete with the latest features and any required fixes. Simply add to your page:

<script

   src="http://code.jquery.com/jquery-latest.js">

</script>

<script

   src="http://code.jquery.com/ui/1.10.2/jquery-ui.js">

</script>

<link

   rel="stylesheet"

   href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />

The first source is jQuery, which is another great addition to your programming arsenal and an underlying part of jQuery UI. The second source is the latest version of jQuery UI. The third is a link to the stylesheet that jQuery UI uses to format the various controls.

jQuery UI also appears in a number of hosted configurations. You use a hosted configuration to reduce the number of domains that a user has to allow in order to work with your application. Instead of accessing jQuery UI using the <code.jquery.com domain, you use a domain such as ajax.googleapis.com. All of the libraries on the hosted configuration use the same domain, so the user only has to allow that one domain to interact with the browser. The safest (and most commonly used) of these hosted configurations is provided by Google at https://developers.google.com/speed/libraries/devguide. This library includes:

  • AngularJS
  • Chrome Frame
  • Dojo
  • Ext Core
  • jQuery
  • jQuery UI
  • MooTools
  • Prototype
  • script_aculo_us
  • SWFObject
  • WebFont Loader

A Word About Documentation

I’m very pleased with the jQuery UI documentation, and I wish more software emulated its presentation. The documentation starts with a good overview of each of the elements for a particular category, such as Widgets, shown here.

jQuery user interface

The categories appear on the left side of the display, highlighting a number of interesting additions for your applications.

You get a full description of each interface element as a whole and a simple example on the introductory page. When you click on a particular entry, you see a listing of the options, methods, and events for that element, the HTML markup, and coding examples, as shown here.

accordion_widget

The code on this first page is generic and simple, unlike many libraries that apparently want to impress you by using every feature. This approach gives a novice user something easy to try in order to understand the basic functionality of the target library element. When you click on one option, method, or event link, you see detailed documentation followed by a more complex example featuring that particular element.

The documentation never disappoints from an accuracy perspective. What you see in the documentation actually works that way in your application.

However, the documentation isn’t always as complete as it could be. For example, you’ll find that the widgets support events, such as onclick, don’t appear in the documentation because they’re covered at a higher level in the documentation. It would be nice to have a complete list of every option, method, and event associated with a particular element directly on that element’s documentation page.

Using jQuery UI

The whole purpose of using a library is to make things easy. jQuery UI delivers in a big way. The markup and content used to create the user interface elements often require more lines of code than the JavaScript required to make it functional.

The Accordion widget is one of my personal favorites, so that’s the one I use in this example. You start by adding the required sources at the top of the page (as mentioned in the “Accessing jQuery UI” section). Here’s the markup required:

<div id="Configuration">
<h2>Foreground Color</h2>
<div>
<input id="FGRed"
type="radio"
name="Foreground"
value="Red"
checked="checked" />
<label for="FGRed">Red</label><br />
... Other <inputs> and <labels> ...
</div>
<h2>Background Color</h2>
<div>
<input id="BGRed"
type="radio"
name="Background"
value="Red"
checked="checked" />
<label for="BGRed">Red</label><br />
... Other <inputs> and <labels> ...
</div>
<h2>Options</h2>
<div>
<input id="Sounds"
type="checkbox"
name="Sounds"
value="SpecialSounds" />
<label for="Sounds">Use Special Sounds</label><br />
... Other <inputs> and <labels> ...
</div>
</div>

The Configuration <div> acts as a container for the Accordion widget. Inside this <div> are individual headings that are used to provide tabs for the Accordion widget. Under the tabs are <div> tags that provide the content for that header, which comprise <input> and <label> pairs in this case. The widget provides a great deal of flexibility with regard to content, so you should explore several examples and experiment on your own.

Here’s how this markup looks as an Accordion widget control:

Using the Accordion widget

The user interface element looks pretty cool and it works great, but my example is really basic. There are all sorts of things you can do to improve its appearance. However, the issue now is what it costs in the way of JavaScript code to make this example work. Here’s all you need to write:

<script type="text/javascript">
$(function()
{
$("#Configuration").accordion();
});
</script>

Yes, that’s it. This function simply states that when the document is loaded and ready, that the application should assign an Accordion widget to the Configuration <div>. The jQuery UI addressed all of the other details for me. I did add a little style information to make the output look a little nicer. Here’s what I used for the example.

<style>
#Configuration
{
width: 400px;
text-align: center;
}
#Configuration div
{
text-align: left;
}
</style>

The information is transmitted to the server using a simple submit button. The data is transferred as part of the URL. So, there’s nothing complicated involved in getting this widget to work. The amazing thing is that all of the widgets work this way.

Dealing with Complexity

As long as you like the widgets, special effects, and other features of jQuery UI precisely as presented, you don’t have to deal with any sort of complexity. All of that library code remains safely hidden away and you won’t have to think about it even a little. The problems start when you want to do something special.

For example, you might decide that you want the Spinner widget to display letters instead of numbers. Trying to create such a scenario involves delving into the heavy duty code, along with the its CSS. Fortunately, the Ben Knows Code site already did the heavy lifting for you in this case. That’s the interesting thing about jQuery UI; there are hundreds of these helpful sites.

A smart developer will try to make the best use possible of the basic library, which is amazing on its own to see what you can do with the special effects, widgets, and other elements. When you really can’t make do with the basic library element, it’s likely that someone has already dealt with the modification (or something that’s close enough). Also consider using the tools that jQuery UI provides, such as Themeroller for creating custom CSS for your application. Only when everything else has failed will you need to delve into the documentation and the source code.

Bottom Line

Even though this article is about a specific library, jQuery UI, it also presents essential principles that you should consider for every third-party library. You can summarize these principles as:

  • Does the library answer a specific need that I have for my application?
  • Is the library from a reputable provider?
  • Are there any known reliability or security issues with using it?
  • Does the library provide complete documentation and example code?
  • Is it possible to make modifications to the library to meet my specific needs?

jQuery UI and many other third-party libraries meet all of these principles and provide exceptionally good value to the developer who employs them. The biggest issue that confronts you when you work with this, or any library, is the complexity of the underlying code. In some cases, you find that someone else has already ferreted out the details of a specific change for you; but in other situations, you have to work through the code to discover how to modify it to meet special needs. Fortunately, the times you actually need to perform this grueling task are rare.

See also: