JQuery_ Novice to Ninja - Earle Castledine [118]
The droves of new users and intrigued old-school media types flocking to the site have created a tidal wave of data, which the site’s administration section is struggling to keep up with. Our client is worried that important information might be overlooked, as it’s becoming nearly impossible to glean any meaning from the unstructured lists and tables of data currently in there.
The admin area of a site is traditionally the most neglected; it’s out of sight of the general public, so we can cut corners and put less thought into usability and the user experience. Out the window go best practices such as progressive enhancement and concerns about accessibility (usually due to extremely tight deadlines, mind you!).
But the rise of the Rich Internet Application is changing that. Clients expect our web-based systems to rival their desktop applications for usability and design. Thankfully with jQuery by our side, that’s no problem!
Lists
Lists are the real unsung heroes of the post table-based layout period of the Web. As designers were freed from the constraints of the tyrannical table cell, they started to look for other (semantically correct) ways to recreate common user interface elements such as menus, navigation panels, tag clouds, and so on. And time after time, as the redundant layout cruft was stripped from the underlying data, all that was left behind was—a list!
The StarTrackr! site is already home to an extensive array of lists: they form the basis of our tabs, accordions, menus, image galleries, and more—but there’s far more we can do to augment and enhance the humble list.
jQuery UI Selectables
The ocean of user-generated content is proving a handful for our client. Thousands of tags are pouring in from the site’s users—but now the legal department is saying that as the manager, he has to approve every single one manually, to avoid a repeat of a recent nasty litigation.
Because the site employs an unconstrained tag system, there are stacks of duplicate tags in the lists—and with the current system that means stacks of extra administration. What the client really wants is a way to easily see tags, select them (and any duplicates), and click a button to approve or reject them.
Our plan of attack is to add jQuery UI’s selectable behavior to our list. Making an element selectable gives the user the ability to lasso any of the element’s children to select them: if you click on one element, then drag over subsequent elements, they become highlighted. You can than process the selection however you see fit. Perfect for administrating boring lists! The behavior we’re aiming to create is illustrated in Figure 8.1.
Figure 8.1. Selectable list items
In addition to lassoing, the selectable behavior also lets you add nonsequential items to the list using the Ctrl key (as you can do in most desktop applications)—and even navigate the selections with the keyboard.
Tip: Keep Your Users in the Loop
Although being able to click and drag selections on a list is very cool and very useful, it’s only cool and useful if your users know about it! Making selections in this manner is a nonstandard form of interaction on the Web, so you’ll need to provide instructions to your users to teach them how to use your new functionality.
Let’s have a look at the markup. The server spits out a long list of tags, which is a fine base for our selector grid. We’ll also throw in a few buttons to allow users to approve or reject the tags in their selection, as well as a button to reset the selection:
chapter_08/01_jquery_ui_selectable/index.html (excerpt)