Thought Delimited

This past Wednesday, I attended the first jQuery UI meetup at the Microsoft office in downtown Washington D.C. The sole presenter for the meeting was Richard Worth, one of the members of the jQuery UI development team, who spoke to us about the new features in the latest release of jQuery UI, version 1.8...and mentioned a few things that were planned for the next release.

The first 1.8 feature he showed us was the new Position utility (the first and currently only Utility component in the jQuery UI framework). It's actually kind of a secret addition to 1.8 because the main "Demos & Documentation" menu (http://jqueryui.com/demos/) has been updated to include the Utilities category yet, but if you open any demo page you'll see it listed in the left menu column. As the name implies, Position lets you set absolutely position a DOM element or a widget relative to another DOM object, which could be another page element, the page window itself, or the mouse cursor. Richard mentioned that Position is part of the Menu widget they are putting together for the next release, which is something I'm looking forward to seeing.

Another feature added in 1.8 is the Autocomplete widget, which lets you create either a text input or a select/drop-down input that displays a list of suggested values based on the text already entered. The suggested values can be provided by an array of data within the Javascript, data from a server-side script returned as JSON, or data from a callback method.

The last 1.8 feature he talked about was the Button widget. The Button widget lets you restyle standard HTML form buttons using CSS, and gives you the ability to make buttons containing icons or combining icons with text. It also lets style hyperlinks as buttons, and makes it easy to convert checkboxes and radio buttons into toggle button controls while still retaining their native functionality. That particular feature caught my attention because it's one potential solution to the inability to directly style checkboxes and radio buttons using CSS, a problem I had to work around when I designed my dirtyFields jQuery plugin. But Richard went on to say that there were plans to include widgets or utilities in the next jQuery UI release that would allow developers to style checkboxes and radio buttons on their forms.

Richard concluded his presentation on UI 1.8 by showing us a sample website that put the new features through their paces.  The website address is http://cmsexpo.css-tricks.com/. The search box at the top of the left menu uses the Autocomplete widget to display a customized list of product names and images.  Clicking on the picture of either product on the main page causes the image to grow, an effect created in part using the Position utility (I forget the exact explanation of how it was done).  The store page on the site (http://cmsexpo.css-tricks.com/store/) demonstrates the collision option of the Position utility: if you hover over any of the products, a tool tip-like box appears at the bottom of the product image box.  But if you reduce your size of your browser window and position the web page such that the bottom of the product image is slightly cut off at the bottom of the window, and then you place the cursor of the mouse over the image again, the tool tip box will appear at the top of the image box instead, as the collision condition for the tip box has been met and jQuery knows where to reposition the tip box in that circumstance...very cool!

Having used a few of the jQuery UI interactions and widgets in my own projects, I'm glad to see that work on the library continues at a steady pace, and it sounds like there are some really nice features on the way that will make our lives as developers even easier.