Yet another desktop paradigm brought to the web environment is selectable. A selectable component is selected by clicking and holding a blank area and dragging the mouse up to another area and releasing the mouse button. Or you can just click inside of the component.
Clicking on an outside area deselects a group, and holding Ctrl + click (or Command + click on Apple computers) enables you to select multiple items, as shown in Table 9-8. Selected elements are given the class ui-selected.
The following example shows a combination of a div, anchor (link), and list items all made selectable.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link
type=”text/css”
href=”css/ui-lightness/jquery-ui-1.8.13.custom.css”
rel=”stylesheet” />
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script src=”js/jquery-ui-1.8.13.custom.min.js”></script>
<style type=”text/css”>
#selectable div {
width : 150px;
height : 30px;
padding : 10px;
margin : 10px;
border : 1px solid;
}
#selectable div.ui-selecting {
background: blue;
}
#selectable div.ui-selected {
background: lightblue;
}
</style>
<script type=”text/javascript”>
$(function(){
$( “#selectable” ).selectable();
});
</script>
</head>
<body>
<div id=”selectable”>
<div class=”ui-widget-content unselectable”>Item 1</div>
<div class=”ui-widget-content”>Item 2</div>
<div class=”ui-widget-content”>Item 3</div>
<div class=”ui-widget-content”>Item 4</div>
<div class=”ui-widget-content”>Item 5</div>
<div class=”ui-widget-content”>Item 6</div>
<div class=”ui-widget-content”>Item 7</div>
</div>
</body>
</html>
Code snippet is from selectable.txt
Figure 9-4 illustrates the selectable items in the state of being selected, and after selection. The first item is not selectable, which is accomplished by giving that item the CSS class unselectable.
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc