Web Development with jQuery®

(^372) ❘ CHAPTER 14 SELECTABLE
While selection is happening, as items are included in a selection, sometimes items are also excluded
from a selection. When items are excluded from a selection in progress, the custom event callback
function assigned to the unselecting option is fi red. Like the selecting option, the unselecting
option also receives data in the ui argument. A selector is provided to the ui.unselecting prop-
erty, which contains the fi le nodes that should be unselected; each fi le that should be unselected is
unselected using a call to unselectFile().
unselecting : function(event, ui)
{
$(ui.unselecting).unselectFile();
}
});
Although it is a niche feature that is not called for often in programming, the jQuery UI Selectable
plugin provides useful functionality that has been with computing since the dawn of the graphical
user interface.
NOTE Complete API documentation for the Selectable plugin is available in
Appendix L.

Summary

In this chapter, you learned about the jQuery UI Selectable plugin, which provides functionality for

making selections by drawing a box with your mouse cursor. You saw how the Selectable plugin can

be applied to the Finder clone that you made in Chapter 12.

The Selectable plugin, like jQuery UI’s other plugins, accepts an object literal of options that are

specifi ed in key, value form. The Selectable plugin lets you specify callback functions for selectable

events. Callback functions provided to the options start and stop are executed when a selection

begins and ends, respectively. Callback functions provided to the options selecting and unselecting

are executed as items are added and removed from a selection while a selection is taking place.

EXERCISES

1. Which option do you use to execute the callback function when a selection begins?


2. What options do you use to execute callback functions when items are added to or removed
   from a selection (while a selection is taking place)?


3. When using the selecting and unselecting options, how do you access each element added to
   and removed from the selection?


4. What selector would you add to a style sheet to customize the look and feel of the
   selection box?

http://www.it-ebooks.info