jQuery UI

Chapter 11. Selecting Items

jQuery UI makes it easy to select items on the page. Select means that the page elements can be grouped in the same block to be processed simultaneously (e.g., selecting several files to put them in the trash). Rather than putting them one by one into the trash (using the drag-and-drop functionality that we examined in Chapter 10), items are selected using the mouse and then dragged together to the trash.

jQuery UI has implemented this functionality in a similar way to that found in graphical operating systems such as Windows, Mac OS, or Linux. You can use the mouse to select multiple items and also select or deselect an individual item in the group by pressing the Ctrl key while you click.

Basic Principles of Selecting Items

Suppose we want to write the HTML code to display the selection shown in Figure 11-1. Here, we have five paragraphs and we selected the first three with the mouse. A dotted rectangle is added during mouse movement, showing the selection area.

The selectable items should be grouped together in a <div> (or any other parent). All elements in the descendants of that parent can be selected.

In the <script> tag, the encompassing <div> element is managed by the jQuery UI selectable () method:

<script src = jquery.js></script> <script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script> <link rel=stylesheet type=text/css href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css /> <div id=div1> <p> Paragraph 1 </p> <p> Paragraph 2 </p> <p> ...