jQuery UI 1.5b: New API, more features, huge performance boost

Posted on by

Hey everybody,

The jQuery team is proud to release the first beta release of the new upcoming version of UI, jQuery UI 1.5! It has been a long path to this release – originally intended to be a bugfix release, it was growing into something we just couldn’t call 1.0.1, not even 1.1, no, it’s so damn delicious we had to call it 1.5.

jQuery UI 1.5 is a complete overhaul of the library – many of the components have been completely rewritten from scratch to improve overall stability and performance, and we finally managed to settle on a unified API for all components. So let’s get straight to a list of all the changes:

Unified API

The API has been updated for all UI components. It should now be very easy to use other plugins if you’re familiar with one of them. There is only one exposed method for every plugin – All other methods are called by passing in a String into the exposed method, the initialization of the plugin works by giving on a options hash as first argument. You can now change and get all options at a later point if you want to by using the new data method. Basic example for draggables:


$(..).draggable({...}); //Initialize the draggable
$(..).draggable("disable"); //Disable the draggable
$(..).data("cursor.draggable", "move") //Change the cursor during drag to 'move'

Updated and revised documentation

The documentation in the jQuery Wiki has been completely updated to reflect the recent changes. We also made sure all callbacks and its arguments are documented this time.

Drag & Drop: Snapping, Relative dragging

Draggables and Droppables have been completely refactored. It might now be the most non-destructive drag & drop implementation ever: The css position’s value will not be changed except for ‘static’: That means that elements, that were static or relative, will not be forced into absolute positioning, which often destroyed layouts, especially when dealing with floats.

Some options have been renamed to better be recognized: preventionTimeout becomes delay, preventionDistance becomes distance.

Also, a new option plugin has been added: The snap plugin. Remember the docking Winamp windows? Yes, you can do that now with UI draggables – just set “snap” to a selector to select all elements you want to snap to and you’re ready to go. Of course, you can also configure it to your needs using snapTolerance and snapMode.

Slider: Ranges, multiple handles and accessibility

The slider wasn’t refactored, but has been completely rewritten from scratch. While it’s still almost backwards compatible, it’s now very stable and simpler than ever: The moveTo method now only takes two arguments: The value you want to move the handle to and optionally the index of the handle you want to move. Want to retrieve a specific handle value? No problem, just call $(..).slider(“value”, index) .

Even better, the slider now is completely keyboard accessible: You can now tab and focus each slider handle seperately and move its position using the left/right keys. We also improved support for using the mouse: Clicking into a empty area now moves the focused handle to the clicked position, regardless on how many handles you have.

For those of you searching for advanced usage, the slider now supports ranges: Just set the option “range” to true and make sure you have two handles, and the script will create a visible range between these two sliders that can be styled individually. The script even makes sure that you cannot create negative ranges.

Sortables: Connected sortables, serialization and more

Rewritten as well, the sortables now support a wide range of features you already know from draggables: cursor, zIndex, revert, opacity, axis, handles, containment and scrolling. Additional to that, you can now serialize your items to a url hash, and you now have the often requested ability to connect multiple sortables, so you can drag a node from one sortable to another.

and there’s more!

This is just an excerpt of the plugins I personally was involved in – the final release will come with an official changelog – but most of the other plugins have been refactored as well, with tons of new features in datepicker, tabs, accordion, resizables and more.

..and less!

Preparing for our sister library Enchant, we removed the magnifier and the shadow plugin and moved it to Enchant. Worry not, you can find them in our SVN trunk under trunk/fx. Additionally, the table sorter component has been removed because of API and roadmap incompabilities. There will soon be a grid component that includes most of its functionality.

…and countless bugfixes

We could have made it easy for us, just rewrite everything and delete all bug tickets of 1.0 because it’s not possible to track down anymore, but we did not: All issues coming in for the 1.0 release have been adressed and solved.

For everything that has changed in this release, please consult the documentation or look for it in the code. Remember this is a beta release – expect things to be buggy and unstable (but better than 1.0 :P ). Also, you would do us a great favor if you report any issues to our bug tracker.

Now go ahead and grab it here: http://ui.jquery.com or directly from our google code page: jquery.ui-1.5b.zip. For this release, we deactivated the downloader – so please download the zip package and include what you need. You can read about the dependancies in the documentation.

Thanks to all the contributors who made this release possible – I will thank each of you individually in the final release notes, I’m too lazy and too tired to do it twice :)

See you again in about two weeks!

24 thoughts on “jQuery UI 1.5b: New API, more features, huge performance boost”

  11. robert on said:

    I’m relatively new to JS development so sorry if this is a silly question…

    “There is only one exposed method for every plugin – All other methods are called by passing in a String into the exposed method, the initialization of the plugin works by giving on a options hash as first argument”

    Why is this a good thing? Is there something wrong with member methods?

  13. Krzysztof on said:

    Hi,
    I’ve tried some jQueryUI demos and I’m afraid that there is something wrong from the very beginning or something I can’t understand.
    I hoped that there may be a problem with IE 6.0 or with slow jquery.com server or something like that, but I’m afraid I’m wrong.
    Looking e.g. into http://dev.jquery.com/view/trunk/ui/demos/ui.dialog.html. It loads 6 s (each time).
    For comparision: http://extjs.com/deploy/dev/examples/window/hello.html loads 3 s (first time took longer).
    Opening default simplest dialog in jQueryUI shows orange unstyled title, green unstyled window pane, Hello, World! contents, and status bar in browser stating that 10 item remaining to load. After 12 s (!), the whole dialog is ready with bordered parts, grip handles, and close button.
    Moving cursor over red close button each time shows http://dev.jquery.com/view/trunk/ui/demos/ui.dialog.html# addres in status bar, moving out reports loading dialog-titlebar-close.png, red cross button pulsates off and on each time.
    Trying to resize dialog by dragging grips destroys its styling, again 10 items remaining to load, all freezes for next 12 s or so.
    Opening similar Hello World dialog in ExtJS goes instantly, hovering close button changes its style instantly, resizing window does not destroy its styling.
    What a heck? Where is the problem?
    I’ve tried to look into other examples, e.g. tabs (http://dev.jquery.com/view/trunk/ui/demos/ui.tabs.html). Sliding cursor over tabs make them blinking annoyingly on and off, with visible blind phase (first time it took some time to load new style elements to show them at all). Maybe it is just wrong timing in dynamic effects?
    I understand that creating UI system for Web application is a complex and tedious task. I understand that rewriting previous version was an enormous task. But after reading all “Great job!” and Good work!” applauses, I’m afraid to go to further conclusions.
    I just believed that basing on jQuery, being among the best JS libraries, could lead to equally best UI library. Observing Ext demos (not going into other comparision, because Ext can be jQuery based as well) I can see that dynamic interface can be slick, smooth and fast. Looking into jQueryUI samples, I cannot state similar conclusion.
    Moreover, I’m afraid that other people after trying to look into jQueryUI demos will abandon concept of using it at all (what even worse, with the whole jQuery core).
    All the best for the jQueryUI team!

  14. Massimo on said:

    Great Job … can’t wait to see it go final :)

    I’ve catched a small problem (too lazy to register for the bugtracker now :) ). On firefox 3 Beta 3 the sortable boxes is not working, except for Box n.1, on all the other boxes it’s impossible to start dragging them.

  15. ronald on said:

    the draggable api are lot useful now for creating such application with jquery ajax well it really make simple to create one with this

  16. Richard D. Worth on said:

    @robert: It depends on what you mean by member methods. The new API answers (at least) three concerns: 1) to be jQuery-like 2) to support chaining 3) to minimize the namespace footprint.

  19. Krzysztof on said:

    Hi again,
    I wondered why my previous reply (full of criticism, but hope a positive one) posted at February 14th, 2008 at 7:14 am, has been moderated out.
    I decided to repeat my experiments using another (remote) server, that has better connection with Internet than mine.
    I could not repeat from there any negative effects I have reported earlier from my machine (although I still observe them on my computer).
    So the reason is probably in Internet connection speed.
    I have tested connection speed using http://www.broadband-help.com/tools/speed-test/.
    From my computer (with IE 6.0), results are: 1.90 Mbps download, 242 kbps upload speed.
    From remote server (with IE 7.0), results are: 3.37 Mbps download, 3.18 kbps upload speed.
    So there are differences, but:
    – my connection is not as much bad;
    – other solutions (ExtJS) can provide smooth response.
    On my computer, I’m dealing with many sites and I’m testing various JS dynamic effects delivered in different packages, but I haven’t observed such kind of retardation like with jQueryUI. On the contrary, on the other computer it runs quite smoothly.
    Do you know about any other reasons (in e.g. browser configuration) I have to check out?
    Regards!

  20. Krzysztof on said:

    Hi once more,
    I’ve just upgraded from IE 6.0 to IE 7.0. It looks that all my previous problems with jQueryUI disappeared. Now jQueryUI demo runs normal. It must have been something wrong with my installation and IE 6.0 configuration.
    In the same time, I’ve realized that displaying http://www.liferay.com which previously was annoyingly slow in my IE 6.0, works significantly faster in new IE 7.0. Maybe from the same (but unknown) reason (btw. Liferay bases on jQuery on client side).
    Sorry for disturbing.

  23. Anus Buttford on said:

    Great widgets! Particular the Slider! Say, is it possible to have the left background of the slider handle have a different color (during dual-slider mode) than the right side of the slider handle? And the middle part of the two handles have yet another color? I am trying to use the dual-slider as a spam level indicator and I want the dual-sliders to represent 3 different sections of spam. The left section represents safe email, the middle section represents suspected spam and the right side represents confirmed spam. Currently I am using another slider library but it is not as attractive as jQuery’s implementation.

  24. h3 on said:

    Great work, I can’t wait to try it.

    I think that it’s a good idea to move sugar coat in a separated project (Enchant), really nice.