Objectives and outcomes

In this tutorial we are going to learn about selectable interaction in jqeuryUI. By the use of selectable function we can use select multiple objects at the same time. Example for the same is shown below:

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6

We can select multiple objects by clicking on the item plus CTRL key



HTML code:

<html>
<head>
<title>jQuery UI Selectable</title>
<link href="jquery-ui.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
<body>
<ol id="select1">
<li class="content">Item 1</li>
<li class="content">Item 2</li>
<li class="content">Item 3</li>
<li class="content">Item 4</li>
<li class="content">Item 5</li>
<li class="content">Item 6</li>
<li class="content">Item 7</li>
</ol>
</body>
</html>


CSS stylesheet

<style>
#select1 .ui-selecting
{ 
background:#C5F807; 
}
#select1 .ui-selected 
{ 
background: #FFF; 
color: #585858; 
}
#select1 
{ 
list-style-type: none;
}
.content 
{
background: #585858;
border: 1px solid #FFF;
color: #FFF;
}
</style>




Javascript

<script>
$(function() {
$( "#select1" ).selectable();
});
</script>


In the javascript we have used selectable function to implement the interaction. If we see the selectable function definition in jqueryUI file we notice that this works with two classes i.e. ui-selecting and ui-selected for whch we have defined the CSS in the stylesheet.