Introduction
This chapter demonstrates about the jQuery UI Selectable Interaction to select one or multiple elements at a time and following are the concepts are covered in this chapter.
- Selectable Interaction
Description
The jQuery UI Selectable Interaction provides allows the used to select one or multiple elements, just by dragging the mouse over them or clicking on individual things.To apply this Interaction use method selectable. The code below demonstrates to use the choosable interaction on the element that contains a list of elements from that the user will select.To create a visual result of the choice we use CSS classes.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Selectable : Creating Selectable</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
div.asia {width: 200px; background-color: #0000FF; font-family:Verdana;
margin: 4px; text-align: center; border:3px solid #ccc; padding: 4px;}
#Asia {position: absolute; left:10px}
div.ui-selected {border: 4px solid #aaa; background-color:#FF0000}
div.ui-selecting {border:4px dotted #000; background-color:yellow;}
</style>
<script>
$(document).ready(function() {
$('#Asia').selectable();
});
</script>
</head>
<body>
<div id="Asia">
<div class="asia">HTML</div>
<div class="asia">HTML5</div>
<div class="asia">XHTML</div>
<div class="asia">SVG</div>
<div class="asia">jQuery</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Enable Multiple Selection
The jQuery UI Selectable Interaction is used to choose elements by simply clicking on them.Multiple elements are selected, and for non-contiguous choice use Control/Meta Keys. The code below demonstrates the Enable Multiple selections as shown.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Selectable : Creating Multiple Selectabl</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
div.asia {width: 200px; background-color: #0000FF; font-family:Verdana;
margin: 4px; text-align: center; border:3px solid #ccc; padding: 4px;}
#Asia {position: absolute; left:10px}
div.ui-selected {border: 4px solid #aaa; background-color:#FF0000}
div.ui-selecting {border:4px dotted #000; background-color:yellow;}
</style>
<script>
$(document).ready(function() {
$('#Asia').bind("mousedown", function(e) {e.metaKey = true;})
.selectable();
});
</script>
</head>
<body>
<div id="Asia">
<div class="asia">HTML</div>
<div class="asia">HTML5</div>
<div class="asia">XHTML</div>
<div class="asia">SVG</div>
<div class="asia">jQuery</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Configuration of Selectable Interactions
jQuery UI provides some set of configuration settings which are tabulated below.
Cancel Setting
The jQuery UI Selectable Interaction setting of cancel can be used to build element unselectable by the user. The code below demonstrates a selector is employed to stop the element with an id value of HTML5 from being designated, however, it may be selected by using a click.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Selectable : Using Cancel Setting</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
div.asia, div.europe {width: 200px; background-color: #0000FF; font-family:Verdana;
margin: 4px; text-align: center; border:3px solid #ccc; padding: 4px;}
#Countries {position: absolute; left:10px}
div.ui-selected {border: 4px solid #aaa; background-color:#FF0000}
div.ui-selecting {border:4px dotted #000; background-color:yellow;}
</style>
<script>
$(document).ready(function() {
$('#Countries').selectable({
cancel:".europe" // oElements with Class .europe cannot be selected
});
});
</script>
</head>
<body>
<div id="Countries">
<div class="asia">China</div>
<div class="asia">India</div>
<div class="europe">Germany</div> <!-- Class .europe -->
<div class="europe">France</div> <!-- Class .europe -->
<div class="asia">Japan</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Filtering Selectable
While triggering jQuery UI Selectable Interaction may be used to prohibit element inside the selectable container that we don't wish to be selectable, for that purpose the setting available is filter The code below demonstrates the elements belonging to class Europe are selected only.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Selectable : Using filter Setting</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
div.asia, div.europe {width: 200px; background-color: #0000FF; font-family:Verdana;
margin: 4px; text-align: center; border:3px solid #ccc; padding: 4px;}
#Countries {position: absolute; left:10px}
div.ui-selected {border: 4px solid #aaa; background-color:#FF0000}
div.ui-selecting {border:4px dotted #000; background-color:yellow;}
</style>
<script>
$(document).ready(function() {
$('#Countries').selectable({
filter:".europe" // only Elements with Class .europe can be selected
});
});
</script>
</head>
<body>
<div id="Countries">
<div class="asia">China</div>
<div class="asia">India</div>
<div class="europe">Germany</div> <!-- Class .europe -->
<div class="europe">France</div> <!-- Class .europe -->
<div class="asia">Japan</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| Settings | Description |
|---|---|
| disabled | If it is set to true then the interaction initially disabled and the default value is false. |
| delay | Is used to specify the delay in milliseconds before the element gets selected. |
| cancel | Is Used to prevent the specified elements from being selected using a click. |
| filter | Which is a Selector to filter the child element. |
Key Points
- If the selection is in progress then class ui.selected is applied, and ui.selected when selected.
- Cancel Setting is not applicable for the element is selected by dragging.
- The elements which match with the filter class are ignored Which does not become a part of the selection.