on CodeBrowsers

jQuery Tools - A Cool New UI Library for jQuery

When I have to do JavaScript programming for a web site, the first thing I do is drop in a reference to jQuery on Google’s CDN. I can’t imagine doing any non-trivial JavaScript work without jQuery. jQuery is:

...a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
And it does that better than any other library I've tried. But none of that describes user interface pieces - tabs, accordions, image sliders, overlay windows, etc. - all the bits and pieces that make for a nice user experience. There are thousands of extensions you can find for these tasks, but having a single UI library makes for compact downloads and for a more consistent experience, both for users and the developer.

I’ve been using jQuery UI for a while now, and will continue to do so in lots of projects. It’s a great library and takes care of a ton of UI pieces, from date pickers to tabs. It has a very good theme roller. The only knock on it is it’s a little on the heavy side.

A little while ago I ran across jQuery Tools, a new UI library for jQuery. It doesn’t have all the bells and whistles of jQuery UI (no slider, date picker, dialog, drag & drop, etc.), but it’s unbelievably tiny. GZIP’d the entire library is less than 6KB, and includes a lot of useful UI pieces - tabs, accordions (a particular tab implementation becomes an accordion), tool tips, overlays, etc. I finally got around to trying it, and I’m glad I did.

Besides being so compact (using tabs, overlay, and expose, the total library size was 2.83KB GZIP’d) and fast, it’s really easy to use. Setting up some tabs or an thickbox style window takes very little code, and the code itself is logical and easy to follow. The documentation is good and they have sample code that covers most scenarios, from basic rendering to call back functions and event handling. Skinning objects is extremely easy, with a number of examples available. For the UI elements it offers I haven’t run across an easier UI library to get started with.

My only nit to pick is it could use some CSS themes - just 4 or 5 different themes/images for all the tools that you can easily access in one place. Right now you have to hunt and peck for them for each tool (if it’s there and I didn’t find it somebody please clue me in). But that’s a small gripe, and didn’t hold me up at all while coding.

One of the best things you get with jQuery is a very enthusiastic and prolific development community, and jQuery Tools is a prime example. If you’re looking for a lightweight UI kit for jQuery, I recommend giving it a shot.