Selectable
This chapter presents the jQuery UI Selectable plugin. The Selectable plugin fi lls 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 fi le 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 http://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='../jQuery.js'></script>
<script type='text/javascript' src='../jQueryUI.js'></script>
<script type='text/javascript' src='Example 14-1.js'></script>
<link type='text/css' href='Example 14-1.css' rel='stylesheet' />
</head>
<body>