Monday, September 17th, 2007

jQuery UI: Interactions and Widgets

Category: jQuery

Following a very successful release of jQuery v1.2, the jQuery team has just announced the release of their new UI & effects library, jQuery UI.

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.

The jQuery UI library was a natural extension to the jQuery project and the team was anxious to provide a rich set of UI controls that could be used to build highly interactive web applications. The library runs the gamut of functionality expected in a UI resource by including:

Mouse interactions:

Interactive Widgets:

Effects:

In addition, the jQuery UI team took the extra steps to allow controls to be themed, thus allowing developers to create their own look-and-feel for components:

We’re launching with one complete theme: Flora (designed by Tom) and two partially-complete themes: Light and Dark (by Sean). Within the next week we’re going to be announcing the details of a new theming competition, along with everything that you need to completely build your own jQuery UI theme.

A complete, detailed explanation of the features of jQuery UI can be found on the jQuery blog as well as the new jQuery UI home page.

Note: jQuery UI requires that you use, at least, jQuery 1.2.1 or newer.

Posted by Rey Bango at 9:29 am
37 Comments

+++--
3.1 rating from 7 votes

37 Comments »

Comments feed TrackBack URI

Good work, jQuery every day best!

Comment by Oscar Antolinez — September 17, 2007

I’m pretty keen on all libraries putting a little more focus on actual widgets. The look/feel bit of it is pretty key for general usage, so I view having themes as essential.

Right now, I’m VERY fond of the extjs library due to widgets, themes, speed, readability and a great user community. The code is jaw droppingly easy to use and extend in my opinion.

I think any other entries into this space can only raise the bar for everyone and give other working examples of new techniques and functionalities. I’m glad jquery has made this move since they are a high profile library in the space…

Comment by Chris Butler — September 17, 2007

Good stuff. Hope Jquery will come up with something that matches ExtJs soon.

Comment by Liming — September 17, 2007

Looking good, although I’m getting lots of errors from the sortable demos under Firefox.

Comment by Ben Bodien — September 17, 2007

Under IE7 the sortable demo has issues with showing the object being dragged. FireFox 2.0.0.6 on first load didn’t allow the demo to work at all but then after page refresh it began working. I’m still thinking about if I really want to use JQuery and the 83kb download the page would require to do anything with it, and that doesn’t even count my 20kb or so of custom js on top of that. Granted it would be 1 time for my site, it just seems like a lot.

Comment by Chris — September 17, 2007

@Chris: I think you’re looking at an uncompressed version of jQuery. The compressed/packed version is 26k and minified+Gzipped comes out to 14k.

Comment by Rey Bango — September 17, 2007

@Chris: as with all js frameworks/libraries the more meat and methods you add the bigger the filesize, gzipping and selecting loading can help.

Comment by jdalton — September 17, 2007

Using dean edwards var shrink method + gzipping is 12.9kb…
Prototype is 15.8kb (1.5.1.1)…. gzipping is a devs best friend.

By the way, great job on the UI extensions I love anything that is as easy as $(‘myelement’).shadow(), now to port to Prototype :P

Comment by jdalton — September 17, 2007

Wow — their animations (especially for drag and drop and window moving and resizing) are especially smooth.

Comment by mdm-adph — September 17, 2007

Yo big ups to the Jquery library! The interactive widgets are posh and I’m totally feeling the table sorters.

Comment by Sin Jin Lee — September 17, 2007

I wish jQuery devs paid more attention to the quality of their source code.


swap: function(e,o,f) {
for ( var i in o ) {
e.style["old"+i] = e.style[i];
e.style[i] = o[i];
}
f.apply( e, [] );
for ( var i in o )
e.style[i] = e.style["old"+i];
},

What is e,o,f??? Element, object, function? Why do I have to
guess that? If f is function, why is it fn in other places and
f here? Why is the entire uncompressed/unpacked source peppered
with variables like a,e,o,f,m,tmp,p,d, etc.? I am not kidding!
These are the real variable names these jokers use in jQuery.

How about this:


var quickExpr = /^[^)[^>]*$|^#(\w+)$/;

Why is that a quick expression? What would be a slow one? Do
I really care that it’s quick? I want to know what it does and
not whether or not it is quick.

It just really annoys me how a marginal framework like jQuery is
getting so much attention why great frameworks like Prototype and
mootools hardly get any attention. Enough with all this fawning
over jQuery. It’s not that great. It only recently started to
be competitive in speed. jQuery UI is a garbage first release
(basically it doesn’t work, and I tried it in Firefox on a Mac,
many things failed for me).

Anyway, jQuery is not that bad, but it’s not great and it’s
nothing to fawn over. Enough with the drooling please.

Comment by Leo Lipelis — September 17, 2007

@Leo: if you don’t like it don’t use it (it’s basically your choice what framework you’ll use), but don’t troll pls.
I also tried UI in FF on a Mac and everything worked.
jQuery is a great framework.

Comment by Ed — September 17, 2007

@Ed: Leo provided some valid criticism. Why he has to be called names?

Personally, jQuery is not my cup of tea, but I still recommend it to some people who needed a simple and easy to learn framework, and they generally liked it.

Comment by @Ed — September 17, 2007

…this looks delicious… can’t wait to play with this…

Comment by Mark Holton — September 17, 2007

Ed: he does like it, he just has a complaint and is very specific. I would say that this is not the right place for that thought Either contribute changes to the source, or drop the devs an e-mail. Ajaxian is not the place to notify jQuery devs of any errors/inconsistencies.

Comment by mike — September 17, 2007

I like jquery. But just a little testing on the demo showed the instability to me. Click on Demos. Then click on Shadow or Magnifier. Resize the new popup that comes up. Now try to move it around. What you get is the cluttered text and colors from the original size moving around making it look ugly and eye damaging.. Check this link to understand what I mean

Comment by Saagar — September 17, 2007

Here is the link for the above comment
http://i13.tinypic.com/4tp0wf8.jpg

Comment by Saagar — September 17, 2007

@Sin Jin Lee: Why don’t you simply email the authors with your suggestions? I get emails every day with people giving me suggestions, feedback and feature requests for jQuery calendar. It is all very helpful and makes the project better as well as my coding abilities. If you know a lot, then share your wisdom in a non-critical way to the authors.

Most of us JUI developers are members of the jQuery community that wrote these UI elements in our free time. I wouldn’t be so quick to judge people who are giving the world something for free. Share with us your suggestions, it just might do some good!

Comment by Marc — September 17, 2007

Although irrelevant to this post, I agree with Leo on jQuery’s confusing source code. jQuery is a very well designed library, but its the small things like unreadable source code that prevent me from making much use of it. If they cleaned up their source code (no, I’m not volunteering), I would probably be more likely to switch from Mootools to jQuery (I use Mootools for cleanliness, but prefer jQuery’s model).

Comment by Andy Kant — September 17, 2007

this is brilliant!

Comment by zero0x — September 17, 2007

@Marc: I can’t reiterate enough what you said with this: “I wouldn’t be so quick to judge people who are giving the world something for free. Share with us your suggestions, it just might do some good!”

It’s amazing how willing people are to say “I love Foo, but I hate Bar.” There are a number of great open source toolkits out there. Choice is a good thing. Use one, use some, use them all, complain to make things better, etc., but be part of the process. It’s open source for a reason!

What always surprises me is that people only seem to mention open source toolkits in their love/hate comments. Meaning, I rarely hear people say something like “wow, I get to choose from jQuery, Dojo, Prototype, Moo, Ext, etc.” instead of being stuck using Atlas, Backbase, Isomorphic, etc. This is the primary reason Dojo was started… to not be stuck with closed toolkits.

From the Dojo perspective, I have nothing negative to say about jQuery (UI), Ext, YUI, Prototype, etc., other than it’s a really great thing to see so many great open source options available, competing and yet working together at times, but all working towards the common goal of making it easier to build great web apps.

That said, I don’t have a problem with the commercial toolkits either as some of them offer really great features, and choice is good.

Comment by Dylan Schiemann — September 17, 2007

Love JQ, but this first release didn’t wow me like the core functions did in the past. Big problems with some of the demos on Opera 9.2 (the only browser I use if I can help it) and the demo gallery doesn’t work at all. It’s par for the course with other rich interfaces, but something inside me was hopping they’d nail the cross browser problems right off the bat.

Comment by -gary — September 17, 2007

I agree with Leo. After skimming through the v1.1 source I couldn’t take jQuery seriously, it hasn’t gotten any better since. For jQuery sake I hope markup becomes a higher priority then filesize before bad style sinks too deep into projects like UI.

Comment by Tup Elocin — September 17, 2007

No table model?

Any UI grid/table component should employ the (very standard) table model, table view separation. This sortable table component resorts to “textExtraction()” function which has to sift through the DOM to find the value to be sorted. Uggh.

The table’s data model should not *be* the actual rendered UI. This is a big design flaw.

Nate Grover

Comment by Nate Grover — September 17, 2007

I am curious about the source code cleanliness issue. I’ll be the first to say that jQuery isn’t the most clear chunk of code when reading through it. That’s why I love the fact that I never have to look at the source. Just like you shouldn’t have to look at the source code for the Windows or Cocoa APIs that you use for desktop apps. You trust they’ll work, and 99.9% of the time, they work as advertised. I guess would personally prefer if I never needed to look at the source code, leave that up to the smart people, and trust their API. As for UI, looks very promising as always, and I’m sure the jQuery community will clean up the obvious bugs in due time.

Comment by Steve — September 17, 2007

The demo page itself crashes IE7. Rey did you guys not fully test it before you announced the demos to the world?

Comment by emehrkay — September 17, 2007

@Steve
It is a problem mainly for people who want to contribute to the development, fix bugs, add functionality, or just plain see how it works. If you’re just using the library and don’t care about whats underneath the covers, then you would be fine with the API.

I write new reusable libraries on a daily basis for work/hobby, so understanding how various libraries function and aid my work is important to me.

Comment by Andy Kant — September 17, 2007

Almost all of the jQuery UI demos throw Javascript errors in Safari 2.0.4 on Tiger, causing most to simply do nothing (as in the case of most of the draggables examples), and others to do the wrong thing (as in the case of the sortable lists that don’t allow me to drop items in a new location).

While the UI stuff is very important and great to see, compatibility is the first consideration for my choice of a JS library. So I guess I’ll be sticking with Prototype/Script.aculo.us and YUI for graphical JavaScript

Comment by Kit Grose — September 17, 2007

Nice start! Keep it up! :)

Comment by Owen Lambert — September 18, 2007

Choice is great, I’ve just switched from proto/scriptac to jquery and more libraries are welcome to my collection :)

It seems QUI has some browser issues, where can I find a list of supported browsers?

Comment by emil — September 18, 2007

I must say that I personally like the UI-stuff. There are a few bugs and unexpected behaviour, but I’d say that for a sort of “first release”, the thing is quite mature.

Comment by Markku Uttula — September 18, 2007

I don’t want to go into a “this is better than that” argument but at this point in time I’m still very happy with ExtJs .

If I recall correctly, doesn’t ExtJs have an adapter for JQuery ?

What’s the point in reinventing the wheel ?

Comment by Hamilton Chua — September 18, 2007

I wrote up a small review here..
http://waynepan.com/2007/09/19/5-reasons-to-use-jquery-ui-and-3-reasons-to-avoid-it/

Comment by Wayne Pan — September 19, 2007

kudos to the jquery team!

one thing i dont like in the UI, though. Their tabs is not pretty

Comment by Brandon Heat — September 19, 2007

JQuery is great framework, i create Bookmarky.cz on this library, but new sortables in UI is slightly slow, i still rather use Interface. I think it needs some time for finish.

Comment by Ladislav Toral — October 1, 2007

I don’t currently have much use for most of the UI components (I’m sure at some point in the future, I will), but I do find myself making use of Sortables in nearly every admin interface I build – for galleries/articles/anything that needs to be rearranged, it’s the most obvious way to do it.

jQuery is the only JS framework I want to use – I find the syntax really easy to remember, the code I write ends up clean and bug-free and visualjquery.com is an awesome way to browse the API :) However, every time I have to go back to Prototype for sortables, in turn meaning $(..) becomes $j(..) to avoid conflicts.. I’d rather not have to do this, but the “Interface” plugin’s sortables just don’t cut it.

Last night I was pondering the idea of porting the Prototype sortable to jQuery, and this AM was delighted to discover jQuery UI. However, it’s just not of good enough quality at the minute. One look at the demos on the site confirmed this, for example, the gallery one looks and feels rough around the edges. I downloaded it anyway and swapped out Prototype sortables for the jQuery UI ones, but the performance is so poor in comparison that it’s just not a realistic option at the minute – simple items (in this case styled li’s) move instantly with Prototype, whereas with jQuery UI there is a lot of jerkiness. I couldn’t find a way to constrain movement to one axis either.

So, disappointing all in all. However, I noticed on the jQuery blog that one of the developers is now employed full time to work on jQuery and jQuery UI by Liferay, so we should start seeing some big progress. It’d take a very impressive alternative to move me away from jQuery for all my Javascript work, although I concur with the posters above on the quality of the source code. Like I say, hopefully this will all be a thing of the past soon :)

Comment by authortitle — February 2, 2008

I just tried out the latest SVN version in the hope that I would eat my words… but no such luck :( Sortables are still reallllly laggy. Fingers crossed for the future!

Comment by authortitle — February 2, 2008

Leave a comment

You must be logged in to post a comment.