I feel like I've given jQuery UI a bad rap. I passed judgement too fast. At first glance, it was a pile of rigid prefab user interface objects generated by jQuery being peddled as 'official'. I know now that it's much more.
jQuery UI is not (just) about a fancy accordion slider. It's a framework for organizing, building, and styling UI widgets that can be as simple as a color transition (or as complex as the exercise I used in Bocoup's Advanced jQuery Training, which I'll demonstrate at the end).
The easiest pieces to appreciate exist in the interactive tools jQuery UI gives you to make your divs draggable, your lists sortable (and much more). Just include jQuery UI (some or all of it), and initialize the functionality you want on a jQuery selection:
That's all it takes to allow your visitors to drag & drop objects with the click of a mouse. They've got examples of each of these on their demos page.
I'm not as keen on themes as some folks are, but I can see their use. If you become a regular consumer of jQuery UI, then themes are a must. In short, jQuery UI applies a set of classes to interface elements (outlined in the jQuery Theme API); If you create CSS that uses these classes, then you've created a theme.
It doesn't stop there. They've taken it a step further, and created an online tool for creating styles that match myriad elements using the theme API. It's called the ThemeRoller, and you should check it out.
This is the most impressive piece in my opinion. I'm not sure why it gets so little press on the jQuery UI web site (unless jQuery UI is for a different audience than jQuery; I mean, we're all devs, right? Why not tell us about the awesome stuff for devs? I could really care less about the prefab accordion widget </rant>).
The Widget Factory is a way to encapsulate your UI code. Here's how it works:
Now you have a widget that you can apply to your jQuery collections just like .draggable()! Daniel Wachsstock wrote a gorgeous blog post about using the Widget Factory called “Understanding jQuery UI widgets: A Tutorial”. It was game-changing for me.
As I mentioned earlier, I created a demo of the Widget Factory in action for Bocoup's Advanced jQuery Training (in progress as of this writing). Let's dive into that now:
To start, I created an HTML form, with sections broken down into fieldsets. I gave the form an ID, and not much else. It's plain, and it's functional, as you can see:
My ProgressBar class look complicated, I know. So let me explain what's going on:
After the widget code (when the document is done loading) I register the ProgressBar class as a widget with $.widget() under the 'bocoup.progressbar' namespace. This extends a widget class that lives under the hood with the class you wrote, and attaches a reference to your jQuery collection based on the namespace you provided. It sounds complicated, but look at the code again. It allows us to quickly match the conventions set by jQuery for extending elements.
Here's a quick screencast. The screencast starts with my widget disabled to demonstrate what the form looks like in it's default state. After a few seconds, I refresh the page and demonstrate the effect that my widget has on the form.
Pretty cool, am I right? I hope you give it another look, and find something you like.