What’s New in jQuery UI 1.9

After a two and a half year delay, and a lot of hard work, the new 1.9 version of jQuery UI was finally released. jQuery UI 1.9 supports the latest stable release of jQuery all the way back to version 1.6. With many bug fixes and lots of changes, this is a significant step forward for the library.

The State of jQuery UI

I’m excited to tell you about the latest changes, but first let me explain the reasons behind some of them. jQuery UI started as a combination of new and existing plugins collected from different sources. Unfortunately, the downside of this initiative was that each author had his own coding style and design principles, which lead to inconsistency among the plugins and widgets, thus retarding the library’s progress as a whole. Realizing the problem, as of version 1.8, the jQuery UI team tried to change the existing process for building plugins by focusing on more simplified APIs. The main goal for the upcoming 2.0 release is to have a completely redesigned project with a much simpler API, a unified code base, consistency across widgets, better stability, full documentation, and a full test suite for every plugin. And, once the existing plugins have been updated to the new standards, the project will move forward at a much faster pace. Now, let’s discuss the changes in version 1.9.

New Web Site

The first thing you will probably notice is that the jQuery UI web site has been completely redesigned with a new look and feel. Besides the new design, which is much wider and cleaner, the API documentation now includes a lot of information that was missing from the old site. The site is still under development, so expect to see even more content in the future.

New Widgets

Let’s welcome the new Tooltip, Spinner, and Menu widgets to the library. I won’t provide you with any code examples here because there are plenty of demos already on the jQuery UI web site. Just follow the links below to see the widgets in action.

The Tooltip Widget

With the new Tooltip Widget, jQuery UI finally has a built-in tooltip solution. The widget allows you to use static content or remote content loaded via Ajax. You can add custom positioning, and choose what animation to use when the tooltip is shown and/or hidden. Also, with the mouse tracking option set to true the tooltip will stick with the mouse pointer until it moves over the element.

The Spinner Widget

When you are dealing with any kind of numeric input, the Spinner Widget can be your best friend. Values can be manipulated with the mouse’s scroll wheel, or via the keyboard. You can spin values by small or by big increments. For example, the up/down arrow keys can spin a value by one, while the page up/down keys spin the value by ten. Also, by using the Globalize plugin you can configure the widget to work with currencies and dates in different locales. Lastly, the overflow option allows you to restrict the spinner to some range. For example, if you set the range from one to five, then anything above five overflows to zero, and vice versa. This is especially useful when working with dates and time.

The Menu Widget

The Menu Widget can be used for inline and popup menus, or as a base for building more complex menu systems. For example, you can create nested menus with custom positioning. Speaking of menus, two more widgets, Selectmenu and Menubar, are planned for the 1.10 release. You can see the Roadmap for details.

API Redesigns

As previously mentioned, jQuery UI is being refactored to become more consistent and compact. Because of this, many API changes have been made in the new release. Some of the most notable changes are listed below.

The Widget Factory

The 1.9 release adds a lot of functionality to the widget factory, especially related to instantiation and inheritance. Widget developers will find lots of new features and improvements. For more details see Widget.

Widgets and Effects

jQuery UI 1.9 introduces API redesigns for Accordion, Autocomplete, Dialog, Position, Tabs, and Effects. As a whole, the consistency across widgets has been improved. Each individual widget has also seen some improvements. The accordion widget provides better animation support, the tabs widget has better Ajax support, and the position utility offers better collision detection. All effects files have been renamed to match the jquery.ui.*.js naming pattern. For example, jquery.effects.*.js has been renamed to jquery.ui.effect-*.js. Similarly, jquery.effects.core.js has been renamed to jquery.ui.effect.js. If you’re using individual effect files, you’ll need to update your file references accordingly. Note that only widgets, utilities, and effects are being refactored in version 1.9. All interactions are going to be rewritten for 2.0 so they will be undergoing a different implementation process.

API Compatibility

Although the redesigns introduce changes, 1.9 maintains full compatibility with the 1.8 API. This means that upgrading to 1.9 should not break any existing pages. This is accomplished by rebuilding the 1.8 API on top of the 1.9 API. The default behavior for all 1.9 releases will be to simultaneously use the 1.8 and 1.9 APIs, deferring to the 1.8 API if there is a conflict. Many existing APIs were deprecated in version 1.9. These APIs will be removed in version 1.10. Luckily, you don’t need to wait for the next release to find out if your code will still work once the 1.8 APIs are removed. You can use the $.uiBackCompat flag to disable all deprecated APIs, allowing you to determine if your code is ready for 1.10. The following example disables deprecated APIs by setting $.uiBackCompat to false.

<script src="jquery.js"></script>
<script>$.uiBackCompat = false;</script>
<script src="jquery-ui.js"></script>

Final Words

The Upgrade Guide contains detailed information on upgrading to version 1.9. Don’t be afraid of all these changes. No one is looking forward to refactoring existing code, but the jQuery UI team has put a lot of effort into ensuring a painless transition process.

Frequently Asked Questions (FAQs) about jQuery UI 1.9