Your opinion matters! Please fill in the InfoQ Readers’ Survey!

jQuery UI 1.0 Includes Mouse Interaction, User Interface Extensions, and Effects Features

| by Scott Delap Follow 0 Followers on Sep 17, 2007. Estimated reading time: 1 minute |
As promised last week the jQuery team has released jQuery UI 1.0. jQuery UI is a fully themed interaction and widget library built on top of jQuery. UI requires the use of jQuery 1.2.1 or greater. From the documentation 1.0 includes:
Mouse Interaction

  • Draggables - Makes items draggable by the mouse
  • Droppables - Makes drop targets for draggables
  • Sortables - Makes a list of items mouse sortable
  • Selectables - Makes a list of items mouse and keyboard selectable
  • Resizables - Makes an element resizable

User Interface Extensions

  • Accordion - A collapsible content pane
  • Calendar - A dynamic date picker
  • Dialog - Modal floating windows and confirmation dialogs
  • Slider - A sliding input element
  • Table - A sortable table
  • Tabs - A tabbed content pane


  • Shadow - Generates dynamic drop shadows on any element.
  • Magnifier - Increase and decrease the size of an element, based upon proximity

jQuery lead John Resig adds the following on the jQuery blog:

jQuery UI signals the start of a whole new branch of the jQuery project which will focus on developing high-quality, reusable, components that you’ll be able to drop in your applications. Frequently, these components are coming directly to you from traditional jQuery plugins, but with strict coding, documentation, themeing, and demo standards. We hope you’ll enjoy this new level of quality as much as we do...Please be kind, there’s still going to be a mess of rough edges, as is to be expected with a brand new project. Please submit bugs to the bug tracker under the “UI” component and bring them up for discussion on the jQuery UI Mailing List. We appreciate your help...

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Why put "jQueyr" in the category of "Java" :) by Qirui Guo

Well, jQuery is really exciting!

Broken links by Richard L. Burton III

Please correct the links to the demo's. They point to pages that contain an extra /UI/ in the URL.

Best regards,
Richard L. Burton III

Re: Broken links by Scott Delap


2nd article on JQuery in a few days... by Remember Objective covered JQuery, now how about EXT?

Re: Ext by Scott Delap

Valid question. JQuery just happened to have two newsworthy items in the last week. From the looks of the Ext blog they had a preview release of 2.0 last week. So we'll cover 2.0 when it is officially out. Feel free to suggest other Ajax coverage.

Problems by Kit Davies

Well, I have to say I'm pretty disappointed. Half those demos aren't implemented and the Droppables didn't work for me (in Firefox 2.0) Not ideal as publicity for a release.

Re: Problems by Ashish Sarin

I think there are some Javascript errors.

Re: Ext by Remember Objective

That'd be good. Thanks. Though I just dropped EXT for YUI, because I found I didn't have the CSS chops to be playing with EXT, YUI seemed easier and had lots of cheat sheets and examples.

EXT looks fantastic, but maybe you could cover it with that angle, does it require more CSS skills than YUI to play with?

I mean the CSS files are all chopped up in EXT. And more important is it the intent of EXT developers to be able to play with the CSS or is it pretty much take what you get out of the box?


Re: Ext by Remember Objective

Not to get too tutorial vs newsworthy info, there's a tip that would defuse a lot of headaches when using the examples out of these widget libraries (whether EXT or YUI):

override styles locally.

e.g. Here I've overridden the style right there in the markup source for the panel, rather than trying to hunt down the hd class being used and trying to modify it or override it with a new class definition:

<div id="panel1">
<div class="hd" style="background-color: #ff0000;"><h1>Panel #1</h1> from Markup

What's the story there? Maybe that "developers struggle with the new widget libraries"...

Re: Ext by Remember Objective

this is actually a much broader struggle for me.

Here's the story:

Application Developers Still Struggle to Reconcile Look And Feel Produced by Library Developers with Look and Feel Requirements of Organization

Always there are these 3-d gawdy overkill graphics that I have to get rid of in whatever library I'm using for professional enterprise. This takes a lot of time. EXT, though it looks good in theory, will have to be modified because the graphics are overkill.

That's enough ranting for one day...

Re: 2nd article on JQuery in a few days... by Richard L. Burton III

ExtJS ( sits on top of JQuery as well as YUI. In fact, I'm using it for a website which I intend to go live with next week :)

Best Regards,
Richard L. Burton III

Re: 2nd article on JQuery in a few days... by Shimon Amit

ExtJS *can* sit on top of JQuery (or Prototype for that matter). It is a fully independent Rich Application Framework. They have departed from YUI for this very purpose.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

12 Discuss