Using jQuery? Check out jQuery UI

Posted at 07:00 on 27 April 2009

I've been a fan of jQuery for quite some time now, but for various reasons I'd never got round to investigating jQuery UI until earlier this week, when I had my attention drawn to it when I was asked why I hadn't used it in a project that I've been working on. So this weekend, seeing as I needed a date picker and a tab control for another project, I decided to download it and have a tinker.

It's a whole bunch of UI widgets and interactive features that sit on top of jQuery, in much the same way as Scriptaculous sits on top of Prototype, and I'm pretty impressed with it. It's every bit as easy to use as jQuery itself, and it follows the same philosophy -- for example, you can add a date picker to as many textboxes as you like with a single line of code:

$('.datepicker').datepicker();

There are other widgets in addition -- an accordion, an in-page dialog box (which seems to be a possible alternative to Cody Lindley's Thickbox), a progress bar, and a slider. Interactions include drag and drop, resizing, fancy selecting, and drag and drop sorting, and there is a whole bunch of interesting effects and transitions on top of that. There are also seventeen different visual themes to choose from, or alternatively, you can design your own either manually or using a handy web-based theme roller application.

There's quite a lot of code to it -- a full installation with one of the seventeen themes on offer will add 300K to your page download, so it's probably not ideal for pages on your site that get a lot of traffic from different visitors. But you can reduce the size of the files to only include what you need in a custom generated download. If you are already using jQuery and are looking for a date picker, or a tab control, or any of the other widgets and effects that it has to offer, it's well worth checking out.