Monday, June 9th, 2008

jQuery UI 1.5: Effects, API, and Themes

Category: jQuery, UI

Paul Bakaus & the jQuery UI Team has released a major update jQuery UI 1.5.

There seem to be three major pieces to the news:

API Refactoring

What we came up with, was an API that removed 95% of our exposed methods, and kept only one single overloaded method per plugin. For example:

  • $(”div”).draggable() creates a draggable
  • $(”div”).draggable(”destroy”) destroys it
  • $(”div”).draggable(”method”) calls another method on the plugin.

The new API also makes all callbacks behave similarly, exposes the default options for each plugin and intelligently cleans up plugins using remove(). We also made it possible to update plugin options on the fly, and added smaller updates that make UI feel like one suite.

In order to make this happen, we removed the jquery.dimensions.js (which can now be found in jQuery core), the ui.mouse.js and the *.ext.js dependancies, introduced a ui.core.js (which includes many useful helpers) and created the jQuery UI widget factory which makes creating a new plugin for UI amazingly simple while making it very difficult to break the API.

Effects: Internalizing Enchant

One of the great things in being able to take a step back is that it offers a totally different perspective on what a full-featured UI solution should offer. While jQuery UI v1.0 was currently offering a nice suite of UI controls, users were in need of solid effects like those offered in libraries such as script.aculo.us and jQuery UI’s former inspiration, Interface. Unfortunately, Interface was no longer being updated which left a bit of a hole in terms of effects; hence a new project called “Enchant” was born. Originally planned to be released as a complementary library to jQuery and jQuery UI, we realized that it made perfect sense to merge Enchant with jQuery UI allowing users easy access to advanced effects and UI controls from one solution.

We’re proud to announce that Enchant is now a part of jQuery UI and jQuery users now have a unified solution for their effects and UI needs. The jQuery UI effects can be used standalone or together with UI and have a separate core which extends the jQuery core to introduce advanced easing, class transitions (morphing) and color animations. All effects are tightly integrated into the main API and can be used as standalone ( $(..).effect() ) or directly from within jQuery methods you already know ( hide()/show() ).

Overall, we already have more than 15 ready-to-use effects for you to use in your projects, not only those provided by script.aculo.us (blind,bounce,drop,fold,slide …), but also fresh, new effects (transfer, explode. clip, scale) that make jQuery UI a great library enhancing your applications!

As promised in one of the last blog posts, it comes with a complete documentation and a combined demo page to let you see them in action.

Create your own Themes, with help

ThemeRoller is an application itself that allows you to create themes on the fly and save them out. The Filament Group did the work and blogged about how.

The jQuery team also wanted to give a shout out to Liferay, “who invested countless hours into the development of the new UI website, and with whom we worked closely together to stabilize jQuery UI for all kinds of enterprise situations.”

Posted by Dion Almaer at 3:54 am
8 Comments

+++--
3.3 rating from 6 votes

8 Comments »

Comments feed TrackBack URI

Thanx,
Great news :)

Comment by vvvlad — June 9, 2008

Themeroller.com is throwing js exceptions in IE7.
The accordion demo on there is also very choppy… I’m chalking it up to poor web host, but blech wish it would make a better first impression.

Comment by ilazarte — June 9, 2008

choppiness on ie7 and ff2 btw.

Comment by ilazarte — June 9, 2008

I know I’m being grumpy now, but – wouldn’t it be nice with a UI-lib that Didn’t start with flashy animations and slideshows and “carousels” etc and crafted more down-to-earth components?

Comment by Fredrik — June 9, 2008

Fredrik – What you described is exactly what jQuery UI is. Enchant is not the whole UI suite.
Check out the build page:
http://ui.jquery.com/download_builder/

Comment by Ryura — June 9, 2008

looks good guys. I can throw away my custom animations for jQuery now. thanks

Comment by aheckmann — June 9, 2008

Hi everyone. We’ve received a ton of interest in jQuery UI and as such you may experience some slowness accessing the jQuery UI site. We are working to correct this and ask that you please be patient in the interim.

jQuery UI Team

Comment by Rey Bango — June 9, 2008

Jquery has come a long way and now making more ground breaking experience for all of us who uses Jquery..

Comment by mountlaurel — August 17, 2008

Leave a comment

You must be logged in to post a comment.