What You Must Know About jQuery UI 1.7

This morning, the jQuery UI team announced that the latest version of the library, 1.7, is now available for download. Let’s take a look at some of the new features and enhancements; they’re quite substantial!

Welcome to jQuery UI 1.7

Wait – What is jQuery UI?

“jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. This guide is designed to get you up to speed on how jQuery UI works. Follow along below to get started.”

Compatibility

This latest UI release is only compatible with jQuery 1.3. That means, if you’re still using jQuery 1.2.6, you’ll need to upgrade; but you should do so anyways! It should also be noted that 1.7 is the first UI release that is fully compatible with jQuery 1.3.

Legacy Release

Now that 1.7 is out, the jQuery team are hard at work on making a 1.6 legacy release to compensate. Hopefully, this should be released within the next month or so.

CSS UI Framework

New to 1.7, the UI is built upon a framework that was specifically designed to assist with UI development.

jQuery UI 1.7 is built upon a brand new and powerful CSS framework that is designed to support not only jQuery UI’s own plugins, but also custom plugin development, so any developer can easily make their plugins ThemeRoller ready. It is a special kind of CSS framework that is aimed specifically at user interface development as opposed to overall page layout. The framework provides classes for commonly used UI elements, states, containers and icons and is manipulated by jQuery UI ThemeRoller.

Plugin Refactoring

To take advantage of the latest new features, all of the UI plugins have been refactored. Additionally, hundreds of miscellaneous bugs were fixed. To allow for offline documentation access, each plugin now comes with all of the documentation – as part of the download.

Google CDN Access

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>

As with 1.6, be sure to link directly to Google’s CDN when importing the jQuery UI. What are the benefits of doing so?

• It saves you money!
• Doing so allows you to download more scripts in parallel.
• Because the file might already be cached on the user’s computer, there is a chance that they won’t have to download the script at all, thus making your website faster.

New Dedicated Blog

Launching with 1.7 is a new UI specific jQuery blog. This will now be your primary source for updates on development, theming, and more during each release.

Demos

The demos and documentation sections have been completely revamped to simplify the process of browsing through each demo, and its respective documentation.

Sounds Great. How Do I Get Started?

If you’re new to the UI library, look over the Getting Started Guide for step by step instructions.

One, of many, reasons why jQuery has proven to be so popular is because of its fantastic documentation. You’ll struggle to find another framework that provides as much. The jQuery UI website is no different. The Getting Started Guide guide will show you exactly what jQuery UI 1.7 is capable of, as well as how to use each plugin. So take a look, and show us what you’ve built!

A big congratulations goes out to the UI team!

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.