Chapter 14Selectable

This chapter presents the jQuery UI Selectable plugin. The Selectable plugin fills a niche in UI functionality, and that niche is the occasion in which you need to make a selection by drawing a box. And this is a niche because you probably won't use this functionality very much in your applications. Making a selection by drawing a box is something you've probably done a few times in your operating system's file manager or a graphical editor like Photoshop.

Nonetheless, the Selectable plugin can be useful when the need arises, and in this chapter you see at least one practical application of this plugin: a continuation of the Mac OS X Finder clone that you started in Chapter 10, “Scrollbars.”

Introducing the Selectable Plugin

The Selectable plugin works similarly to the Sortable plugin presented in Chapter 13, “Sortable,” and all jQuery UI plugins, as you'll have recognized by now, share a clean and consistent API that is implemented similarly from plugin to plugin.

To make elements into Selectable elements, you call the selectable() method on any element. The following document, which appears as Example 14-1 in the source materials at www.wrox.com/go/webdevwithjquery, demonstrates the plugin:

<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <meta http-equiv='content-type'
            content='application/xhtml+xml; charset=utf-8' />
        <meta http-equiv='content-language' content='en-us' />
        <title>Finder</title>
        <script type='text/javascript' src=

Get Web Development with jQuery now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial