jQuery UI - Day 5 (Selectable)

Article

Before reading this article, I highly recommend reading my previous parts:

In selectable widget we select the element using the mouse. We can access single element or elements in a group. Using selectable() method we can select element by mouse click or dragging while holding the ctrl or mouse button.

Syntax:

$(selector).selectable(options) //Define Element Seletable
$(selector).selectable(“option”,”option_name”,value) // Work as Setter
$(selector).selectable(“option”,”option_name”) // Work as Getter

Now we create selectable code.

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scriptsrc="jquery-ui-1.11.4.custom/external/jquery/jquery.js">
</script>
<scriptsrc="jquery-ui-1.11.4.custom/jquery-ui.js">
</script>
<linkhref="jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />
<linkhref="jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />
<linkhref="jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />
<script>
$(document).ready(function ()
{
$("#select").selectable(
{});
})
</script>
<style>
#select.ui-selecting {
background: ActiveCaption
}
#select.ui-selected {
background: darkgoldenrod
}
#div1 {
background-color: bisque;
width: 100%;
height: 400px;
padding-top: 40px
}
#select {
margin-left: 520px;
font-size: 24px;
width: 100px;
list-style: none;
margin-top: 40px;
}
li {
margin-bottom: 4px;
width: 180px;
text-align: center;
}
span {
margin-left: 420px;
font-size: 30px;
}
</style>
</head>
<body>
<formid="form1" runat="server">
<divid="div1"> <span>**********Selectable**********</span>
<ulid="select">
<liclass="ui-widget-content">Element1</li>
<liclass="ui-widget-content">Element2</li>
<liclass="ui-widget-content">Element3</li>
<liclass="ui-widget-content">Element4</li>
<liclass="ui-widget-content">Element5</li>
<liclass="ui-widget-content">Element6</li>
<liclass="ui-widget-content">Element7</li>
<liclass="ui-widget-content">Element8</li>
</ul>
</div>
</form>
</body>
</html>

Design

Result

After designing the page now we will read about Options, Methods, Events of selectable.

Options

Option	Description	Example
appendTo	Define which element the selection helper (the lasso) should be appended to.	$("#selectable_").selectable({ appendTo: "body" });
autoReferesh	This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. Default value is true.	$("#selectable_").selectable({ autoRefresh: false });
cancel	Prevents selecting if you start on elements matching the selector.	$("#select").selectable({ cancel: "a,.cancel" });
delay	It used to set time in milliseconds and defines when the selecting should start. Default value is zero.	$("#select").selectable({ delay: 550 });
disabled	It is used to Disables the selectable if set to true. Default values is false.	$("#select").selectable({ disabled: true });
distance	Define the length after which selecting should start. If specified, selecting will not start until the mouse has been dragged beyond the specified distance. Default value is 0	$("#select").selectable({ distance: 100 });
filter	This option is a selector indicating which elements can be part of the selection. By default its value is *.	$("#select").selectable({ filter: "tr" });
tolerance	Specifies which mode to use for testing whether the selectable should select an item. Fit: overlaps the item entirely., touch: overlaps the item by any amount., default value is touch.	$("#select").selectable({ tolerance: "touch" });

Methods

Method	Description	Example
destroy	Removes the selectable functionality of an element completely. The elements return to their pre-init state.	$("#select").selectable("destroy");
disable	Disables the selectable.	$("#select").selectable("disable"); enable Enables the selectable. $("#select").selectable("enable");
instance	Retrieves the selectable element’s instance object. If the element does not have an associated instance, undefinedwill returned.	$("#select").selectable("instance");
option(OptionName)	Gets the value currently associated with the specified option.	var obj=$("#select").selectable ("option","tolerance");
option(“OptionName”,”value”)	Sets the value of the selectable option associated with the specified option.	$("#select").selectable ("option","disabled",true);
option	Gets an object containing key/value pairs representing the current selectable options.	var obj=$("#select").selectable("option");
refresh	Refresh the position and size of each selectee element.	$("#select").selectable("referesh");
widget	Return a jQuery object containing the selectable element.	$("#select").selectable("widget");

Events

Event	Description	Example
create(event,ui)	Triggered when the selectable created.	$("#select").selectable({ create: function (event, ui) { //Discription }});
selected(event,ui)	Triggered when an element is selected.	$("#select").selectable({ selected: function (event, ui) { //Discription }});
selecting(event,ui)	Triggered when an element is selecting	$("#select").selectable({ selecting: function (event, ui) { //Discription }});
start(event,ui)	Triggered at beginning of select operation	$("#select").selectable({ start: function (event, ui) { //Discription }});
stop(event,ui)	Triggered at the end of select operation.	$("#select").selectable({ stop: function (event, ui) { //Discription }});
unselected(event,ui)	This event is triggered at the end of the select operation for each element that becomes unselected.	$("#select").selectable({ unselected: function (event, ui) { //Discription }});
unselecting(event,ui)	Triggered during the select operation, on each element removed from the selection.	("#select").selectable({ unselecting: function (event, ui) { //Discription }});

Now we take some example using above option, method and events.

Example 1

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-ui-1.11.4.custom/external/jquery/jquery.js">
</script>
<script src="jquery-ui-1.11.4.custom/jquery-ui.js">
</script>
<link href="jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />
<link href="jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />
<link href="jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />
<script>
$(document).ready(function ()
{
$("#select").selectable(
{
delay: 100,
distance: 100,
tolerance: "fit"
});
})
</script>
<style>
#select.ui-selecting {
background: ActiveCaption
}
#select.ui-selected {
background: darkgoldenrod
}
#div1 {
background-color: bisque;
width: 100%;
height: 400px;
padding-top: 40px
}
#select {
margin-left: 520px;
font-size: 24px;
width: 100px;
list-style: none;
margin-top: 40px;
}
li {
margin-bottom: 4px;
width: 180px;
text-align: center;
}
span {
margin-left: 420px;
font-size: 30px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div1"> <span>**********Selectable**********</span>
<ul id="select">
<li class="ui-widget-content">Element1</li>
<li class="ui-widget-content">Element2</li>
<li class="ui-widget-content">Element3</li>
<li class="ui-widget-content">Element4</li>
<li class="ui-widget-content">Element5</li>
<li class="ui-widget-content">Element6</li>
<li class="ui-widget-content">Element7</li>
<li class="ui-widget-content">Element8</li>
</ul>
</div>
</form>
</body>
</html>

Output

code

In above example we defined the value of delay equal to 100 that means selectable will start after 1 second of selection of element. Value of distance is 100 that means selectable will start after mouse has been dragged by 100 pixel. We set the value of tolerance equal to “fit” that mean element will select after selectable overlaps the item entirely.

Example 2

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scriptsrc="jquery-ui-1.11.4.custom/external/jquery/jquery.js">
</script>
<scriptsrc="jquery-ui-1.11.4.custom/jquery-ui.js">
</script>
<linkhref="jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />
<linkhref="jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />
<linkhref="jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />
<script>
$(document).ready(function ()
{
$("#select").selectable(
{
delay: 100,
distance: 100,
tolerance: "fit",
filter: "li:even"
});
})
</script>
<style>
#select.ui-selecting {
background: ActiveCaption
}
#select.ui-selected {
background: darkgoldenrod
}
#div1 {
background-color: bisque;
width: 100%;
height: 400px;
padding-top: 40px
}
#select {
margin-left: 520px;
font-size: 24px;
width: 100px;
list-style: none;
margin-top: 40px;
}
li {
margin-bottom: 4px;
width: 180px;
text-align: center;
}
span {
margin-left: 420px;
font-size: 30px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div1"> <span>**********Selectable**********</span>
<ul id="select">
<li class="ui-widget-content">Element1</li>
<li class="ui-widget-content">Element2</li>
<li class="ui-widget-content">Element3</li>
<li class="ui-widget-content">Element4</li>
<li class="ui-widget-content">Element5</li>
<li class="ui-widget-content">Element6</li>
<li class="ui-widget-content">Element7</li>
<li class="ui-widget-content">Element8</li>
</ul>
</div>
</form>
</body>
</html>

Output

Output

In above example all options are same as previously excepted filter. In filter option we define the “li:even” that means only those list item will select that index is a even number.

Example 3

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-ui-1.11.4.custom/external/jquery/jquery.js">
</script>
<script src="jquery-ui-1.11.4.custom/jquery-ui.js">
</script>
<linkhref="jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />
<linkhref="jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />
<linkhref="jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />
<script>
$(document).ready(function ()
{
$("#select").selectable(
{
delay: 100,
distance: 100,
tolerance: "fit",
filter: "li:even",
selected: function ()
{
var text = "";
$(".ui-selected", this).each(function ()
{
var objIndex = $("#select li").index(this);
text += "List Item Selected is li" + (objIndex + 1) + " ";
});
$("#span2").empty().append(text);
}
});
})
</script>
<style>
#select.ui-selecting {
background: ActiveCaption
}
#select.ui-selected {
background: darkgoldenrod
}
#div1 {
background-color: bisque;
width: 100%;
height: 440px;
padding-top: 40px
}
#select {
margin-left: 520px;
font-size: 24px;
width: 100px;
list-style: none;
margin-top: 40px;
}
li {
margin-bottom: 4px;
width: 180px;
text-align: center;
}
span {
margin-left: 420px;
font-size: 30px;
}
</style>
</head>
<body>
<formid="form1" runat="server">
<divid="div1"> <span>**********Selectable**********</span>
<ulid="select">
<liclass="ui-widget-content">Element1</li>
<liclass="ui-widget-content">Element2</li>
<liclass="ui-widget-content">Element3</li>
<liclass="ui-widget-content">Element4</li>
<liclass="ui-widget-content">Element5</li>
<liclass="ui-widget-content">Element6</li>
<liclass="ui-widget-content">Element7</li>
<liclass="ui-widget-content">Element8</li>
</ul>
<span id="span2">No Item is Selected</span>
</div>
</form>
</body>
</html>

Output

Run

In above example we invoked the selected method and in this method we find out the selected item and print a text message.

Thanks for reading the article.

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all