Friday, March 6th, 2009

jQuery UI 1.7 Released: New CSS Framework & Dramatic Updates to Controls

Category: jQuery

The jQuery UI team has announced today, the release of v1.7 of their effects and UI controls framework. The development took awhile going through some bumps in the road and even a major overhaul of how the library was structured. In addition, the team became much more organized adding new team members which greatly enhanced the development process as well as opening up greater communication with the community via the new development wiki.

There’s a ton of new stuff in 1.7. We’ve fixed hundreds of bugs since 1.5.3 and are introducing many new features, a better core architecture, and major theming improvements.

The key new features include:

  • A new site dedicated to the jQuery UI project
  • jQuery 1.3 compatibility
  • Revamped and optimized plugins
  • A new extensible CSS framework
  • Major enhancements to the Themeroller theming applicaton
  • Demos & Documentation including offline support
  • Bundled themes

The introduction of the new ThemeRoller-ready CSS framework is especially important as it not only allows for easy theming of included jQuery UI but also allows plugin developers to create their own extensions that can take advantage of ThemeRoller’s visual theming capabilities. Scott Jehl, lead architect of the CSS framework had this to say:

jQuery UI includes a robust CSS Framework (http://docs.jquery.com/UI/Theming/API) designed specifically for building custom jQuery widgets and user interface components. The framework includes classes and helpers that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. Although the framework is used by all of jQuery UI’s widgets, it is designed to be used in standalone plugin development as well – it’ll even work with code that isn’t running jQuery UI (or even any JavaScript at all!). By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.

As a bonus for framework users, we’ve also created a bookmarklet (http://jqueryui.com/themeroller/developertool/) that allows you to pull ThemeRoller into any page on the web! Just drag it to your Firefox toolbar and you can style away on any page using the jQuery UI CSS Framework. The tool also allows you to download a theme based on your design.

jQuery UI team member Richard Worth commented on this new release:

The jQuery UI Team and the unequaled community that supports it has come together and produced something really awesome in jQuery UI 1.7. This release represents not only where we’ve come today, but gives us a clear vision for where this library is headed. We want to make Rich Internet Applications as easy as jQuery has made Ajax, and that’s really starting to happen.

This new release is immediately available for download and the team has provided a Getting Started with jQuery UI page to help get new users up to speed quickly.

Disclosure: I am a member of the jQuery project team

Posted by Rey Bango at 8:07 am
14 Comments

+++--
3.4 rating from 74 votes

14 Comments »

Comments feed TrackBack URI

no tree? sigh…

Comment by RobKoberg — March 6, 2009

hm, something is very wrong with the speed of the dialog widget. I use ff3/win – when i click on various dialog examples i have 3-4s delay between click and dialog showing up (first there is background, then stripes, then dialog). its pretty useles in that form (if it’s a matter of preloading maybe you should think about doing it on examples page – now it looks like a very sluggish ui). also, closing works only after second click on the X or Cancel buttons.

Comment by wintercriminal — March 6, 2009

The jquery UI page is down?

Comment by ExtAnimal — March 6, 2009

Yep…down…it WAS working before.

Comment by Jonny — March 6, 2009

The site has gotten a ton of traffic, and is buckling a bit. We’re getting things switched over to s3 and google’s cdn and should have it back up quite soon. Thanks.

Comment by rdworth — March 6, 2009

I’m getting the same issue as “wintercriminal” with the dialog boxes in FF3. Also, I’m seeing bugs in the animation effects in FF3.

Overall, many of the widgets need quite a lot of CSS work. They lack polish compared to Ext-JS and YUI, even Dojo.

Comment by sos — March 6, 2009

My problem is with the states. When you click a button, it simply has to change state–it can’t look like the hover state. Of all the widgets featured in ThemeRoller, only the slider shows a state change when you click on something.

To me, that makes the UI feel broken. I did use jQueryUI in one project, but I won’t use it again until this is fixed. I can’t think of a modern UI that works this way. It’s disturbing.

I’ve mentioned this several times, as have others, and I’ve heard that they are working on it so I remain optimistic.

The ThemeRoller is a terrific thing, btw.

Comment by Nosredna — March 6, 2009

Just a heads up – it seems the dialog problem is just an issue with the website demos (not the library code). I think there’s a little extra script being included by mistake and dialogs are being called twice.

We’re actively working out the kinks on the website to improve its performance and we’ll try to get this issue worked out as soon as we can.

You can browse the demos in SVN to confirm:
http://jquery-ui.googlecode.com/svn/tags/1.7/demos/dialog/

Comment by ScottJehl — March 6, 2009

@Nosredna: It would be nice if you posted your issue to the ui-dev group (http://groups.google.com/group/jquery-ui-dev) so we can chat about it and make fixes where appropriate. I think you make a good point about some of the buttons, but overall most widgets employ 3 button states at some point. For example, Accordion and tabs have the same states as the slider handles you mentioned. The days in the datepicker grid do too, though the arrow buttons could use mousedown states. Dialog does need some state help as well, though clicks in the dialog almost always close it, making that less noticeable.

As for the other elements on the page, those aren’t UI widgets, but just state previews. We can improve how those are presented in ThemeRoller, but they are not part of the widget library.

I’ll look forward to chatting about this on the ui-dev list. Thanks!

Comment by ScottJehl — March 6, 2009

@ScottJehl,

I’ve already mentioned it on one of the jQueryUI Google Groups.

Seems to me that there has to be a visual change of some sort on mousedown, at least for anything that acts remotely like a button.

This makes jQueryUI feel “dead” or “broken.” To be honest, I’ve given up on jQueryUI for now. But I’ll try again when you get to 1.8.

Comment by Nosredna — March 6, 2009

I really love the idea of jQueryUI and for now I am really disappointed…

it seems it is taking jQuery team for ever to build a decent library

there has been more than 2 yrs since interface library and on the outside it seems no real progress has been done….

I am really disappointed that dialogs works really chunky and that they are not smooth (not responsive and chunky dragging

and there is still no tree widget/component…..extJS has one, a great one, for years now

I love jQuery and I can’t imagine my life without it, that’s why I am expecting so much from UI, but as I see it now, it still a long way for being usable in real life

Comment by DamirSecki — March 6, 2009

@Damir: If there are limitations, you should definitely ping the jQuery devs via the UI dev mailing list & explain your points. They may be able to address some of your concerns.
.
http://groups.google.com/group/jquery-ui-dev

Comment by Rey Bango — March 6, 2009

Nice work, that’s looking a lot more stable since the previous Ajaxian post. Might have to starting using this sometime when I can’t avoid using jquery. I wish Prototype(UI) wasn’t as dead as it is, while there’s plenty of plugins some UI competition wouldn’t hurt “hint”.

Comment by Jadet — March 6, 2009

is it me or the rounded corners are still missing for IE ?

Comment by munawar786 — March 7, 2009

Leave a comment

You must be logged in to post a comment.