jQuery UI: Check If Icon Exists

I like the way jQuery UI icons work. You just need a class, generally named after the thing the icon represents, and that class points to a specific location of an image. This approach supports extensibility. You add new icons to the theme images, and add new icon classes that point to them. While this is very useful, I couldn't help but wonder — how to we make sure that the icon actually exists before using it? For example, the jQuery widgets themselves aren't aware of which theme is in use, but if you're adding non-standard icons to one theme, but not another, this capability could be handy.

Selectmenu Test Drive

I took the jQuery UI selectmenu widget for a test drive today, and it's looking good. The widget itself isn't much more than a means to tie select elements into the theme framework, which is important in many circumstances. For example, this widget negates the need for programmers having to base a menu widget on select elements. Instead, the selectmenu uses a menu widget internally, utilizing the parts it needs. The user interaction is nice as well — all keyboard actions work as expected. There is a nice demo showing how to extend the rendering capabilities of the select menu, showing an icon for each item.

jQuery UI: Sliders and Tooltip Values

The slider widget let's the user control a value, between a minimum and maximum by sliding a handle back and forth. This is great for forms. The developer implementing this widget, however, needs to perform some additional work in ensuring the user has appropriate feedback when the handle changes position. How else would they know what they're selecting. Even before the user starts interacting with the slider, the current value needs to be presented. In an effort to save on both development effort and on page space, the value of the slider could be displayed as a tooltip when the user moves the pointer over the handle. Further, we could have the tooltip move along with the handle as it slides, and update the value.

jQuery UI: Icon Widget

The jQuery UI theme framework comes with a bunch of icons. Useful icons. I use them a lot, but not necessarily inside a widget, like an icon button for example. Icons are effective conveyors of information and state. I like user interfaces that user icons to represent things where it makes sense, and to have those icons change state when attention is needed. And adding text to those icons in the form of a tooltip, to further communicate to the user. All great things, all very awkward to implement. I'm constantly repeating myself when using stand-alone jQuery UI icons. So, I went all out. I took care the issue by creating a simple icon widget that took care of the boiler-plate for me.

jQuery UI: Droppable Fundamentals

The draggable and droppable jQuery UI interaction components are cool.  But it turns out that after a recent experiment, I discovered a few things I had gotten wrong with the widgets in the past.  For example, reverting the draggable back to its original position on a failed drop, highlighting the droppable target while dragging, and changing the state of the draggable while dragging.  These are just the visible behaviors that help the user out.  There are a few things I'd got wrong with the code in the past too, so I've put together an example to illustrate some fundamental principles when working with these interactions.  Check out the comments in the code.