Programmatic Selection With The Selectable Widget

The jQuery UI selectable is less a widget than a utility. Technically, it's a widget in that you apply it to elements the same as you would a standard widget — like tabs or progressbar. Really, selectable is more like the other interaction widgets found in jQuery UI — sortable and resizable, for example. Interactions are designed as utilities, used to help out the larger, more fleshed out widgets. Take the dialog, it relies on both the position and the resizable utilities. So who does selectable help out? Anything we do, really, that requires a selection. The trouble is with filling in some fundamental gaps. Like programmatically-selecting items.

Styling Selectable Items With Classes

The selectable widget marks each item, as it's selected, with the ui-selected class. In fact, this is how the widget is able to determine selected items versus unselected ones. One thing it doesn't do, however, is apply any kind of styling to the selected element — that is left up to the developer. I kind of like that, given that I'm always tweaking the default widget styles anyway. There are two ways to go about visually indicating that an item has been selected.