jQuery UI Keynote

These are my notes from Richard D. Worth's jQuery UI Keynote.

Richard Worth wants to plug the book "Designing with Progressive Enhancement" (which is not a jQuery UI book.) It teaches you how to build accessible widgets using proressive enhancement. We're going to be moving a lot of these recommendations into jQuery UI.

We've added a new Utilities category to jQuery UI. In addition to the Position utility, we have two new widgets in the 1.8 release.

Button Widget

You can take any button element and you can call .button on that element, and all three will be styled the same. Checkboxes and radio buttons can be styled like buttons. Sets of radio buttons act like radio buttons and interact with users like radio buttons, but look like actual buttons.

If you want to have a split button, you can do that easily too. Clicking on the first button may do one action, and the second button may show a drop-down.

You can create a bunch of buttons in a toolbar to create something like a media player control center.

Autocomplete

If you attended Scott's talk today, he talked about how the Autocomplete plugin is based on an earlier plugin. We took everything we learned from the previous plugin and refactored this into this new Autocomplete plugin, which is smaller and more extensible.

Position

This is a utility that allows you to position any element near any other element. [applause] This is the two-line tooltip plugin, because you don't have to worry about positioning and collision detection.

Demo

On http://cmsexpo.css-tricks.com/, look at the widget icon under "Featured Widgets." This is done using the Position utility.

We've bound a click handler, as soon as the image is loaded we're going to append the larger image to the body, and set its size the same as the smaller image, and position its center at the veritcal/horizontal center of the smaller image.

Further, you can specify where the larger image is positioned as it grows by writing a callback function that's called each time a keyframe is rendered.

[Richard gave a cool interactive coding demo, showing how to implement an autocomplete search box (with associated images,) and positioning popup price boxes based on mouse position like tooltips.]

Thanks to Richard for giving this presentation.