Contribute
JQuery

jQuery UI - Day 5 (Selectable)

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:

  1. $(selector).selectable(options) //Define Element Seletable  
  2. $(selector).selectable(“option”,”option_name”,value) // Work as Setter  
  3. $(selector).selectable(“option”,”option_name”) // Work as Getter  
Now we create selectable code.
  1. <htmlxmlns="http://www.w3.org/1999/xhtml">  
  2.   
  3.     <head>  
  4.         <title></title>  
  5.         <scriptsrc="jquery-ui-1.11.4.custom/external/jquery/jquery.js">  
  6.             </script>  
  7.             <scriptsrc="jquery-ui-1.11.4.custom/jquery-ui.js">  
  8.                 </script>  
  9.                 <linkhref="jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />  
  10.                 <linkhref="jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />  
  11.                 <linkhref="jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />  
  12.                 <script>  
  13.                 $(document).ready(function ()  
  14.                 {  
  15.                     $("#select").selectable(  
  16.                     {});  
  17.                 })  
  18.                 </script>  
  19.                 <style>  
  20.                 #select.ui-selecting {  
  21.                     background: ActiveCaption  
  22.                 }  
  23.                   
  24.                 #select.ui-selected {  
  25.                     background: darkgoldenrod  
  26.                 }  
  27.                   
  28.                 #div1 {  
  29.                     background-color: bisque;  
  30.                     width: 100%;  
  31.                     height: 400px;  
  32.                     padding-top: 40px  
  33.                 }  
  34.                   
  35.                 #select {  
  36.                     margin-left: 520px;  
  37.                     font-size: 24px;  
  38.                     width: 100px;  
  39.                     list-style: none;  
  40.                     margin-top: 40px;  
  41.                 }  
  42.                   
  43.                 li {  
  44.                     margin-bottom: 4px;  
  45.                     width: 180px;  
  46.                     text-align: center;  
  47.                 }  
  48.                   
  49.                 span {  
  50.                     margin-left: 420px;  
  51.                     font-size: 30px;  
  52.                 }  
  53.                 </style>  
  54.     </head>  
  55.   
  56.     <body>  
  57.         <formid="form1" runat="server">  
  58.             <divid="div1"> <span>**********Selectable**********</span>  
  59.                 <ulid="select">  
  60.                     <liclass="ui-widget-content">Element1</li>  
  61.                     <liclass="ui-widget-content">Element2</li>  
  62.                     <liclass="ui-widget-content">Element3</li>  
  63.                     <liclass="ui-widget-content">Element4</li>  
  64.                     <liclass="ui-widget-content">Element5</li>  
  65.                     <liclass="ui-widget-content">Element6</li>  
  66.                     <liclass="ui-widget-content">Element7</li>  
  67.                     <liclass="ui-widget-content">Element8</li>  
  68.                 </ul>  
  69.             </div>  
  70.         </form>  
  71.     </body>  
  72.   
  73. </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

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.   
  3.     <head>  
  4.         <title></title>  
  5.         <script src="jquery-ui-1.11.4.custom/external/jquery/jquery.js">  
  6.             </script>  
  7.             <script src="jquery-ui-1.11.4.custom/jquery-ui.js">  
  8.                 </script>  
  9.                 <link href="jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />  
  10.                 <link href="jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />  
  11.                 <link href="jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />  
  12.                 <script>  
  13.                 $(document).ready(function ()  
  14.                 {  
  15.                     $("#select").selectable(  
  16.                     {  
  17.                         delay: 100,  
  18.                         distance: 100,  
  19.                         tolerance: "fit"  
  20.                     });  
  21.                 })  
  22.                 </script>  
  23.                 <style>  
  24.                 #select.ui-selecting {  
  25.                     background: ActiveCaption  
  26.                 }  
  27.                   
  28.                 #select.ui-selected {  
  29.                     background: darkgoldenrod  
  30.                 }  
  31.                   
  32.                 #div1 {  
  33.                     background-color: bisque;  
  34.                     width: 100%;  
  35.                     height: 400px;  
  36.                     padding-top: 40px  
  37.                 }  
  38.                   
  39.                 #select {  
  40.                     margin-left: 520px;  
  41.                     font-size: 24px;  
  42.                     width: 100px;  
  43.                     list-style: none;  
  44.                     margin-top: 40px;  
  45.                 }  
  46.                   
  47.                 li {  
  48.                     margin-bottom: 4px;  
  49.                     width: 180px;  
  50.                     text-align: center;  
  51.                 }  
  52.                   
  53.                 span {  
  54.                     margin-left: 420px;  
  55.                     font-size: 30px;  
  56.                 }  
  57.                 </style>  
  58.     </head>  
  59.   
  60.     <body>  
  61.         <form id="form1" runat="server">  
  62.             <div id="div1"> <span>**********Selectable**********</span>  
  63.                 <ul id="select">  
  64.                     <li class="ui-widget-content">Element1</li>  
  65.                     <li class="ui-widget-content">Element2</li>  
  66.                     <li class="ui-widget-content">Element3</li>  
  67.                     <li class="ui-widget-content">Element4</li>  
  68.                     <li class="ui-widget-content">Element5</li>  
  69.                     <li class="ui-widget-content">Element6</li>  
  70.                     <li class="ui-widget-content">Element7</li>  
  71.                     <li class="ui-widget-content">Element8</li>  
  72.                 </ul>  
  73.             </div>  
  74.         </form>  
  75.     </body>  
  76.   
  77. </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
  1. <htmlxmlns="http://www.w3.org/1999/xhtml">  
  2.   
  3.     <head>  
  4.         <title></title>  
  5.         <scriptsrc="jquery-ui-1.11.4.custom/external/jquery/jquery.js">  
  6.             </script>  
  7.             <scriptsrc="jquery-ui-1.11.4.custom/jquery-ui.js">  
  8.                 </script>  
  9.                 <linkhref="jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />  
  10.                 <linkhref="jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />  
  11.                 <linkhref="jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />  
  12.                 <script>  
  13.                 $(document).ready(function ()  
  14.                 {  
  15.                     $("#select").selectable(  
  16.                     {  
  17.                         delay: 100,  
  18.                         distance: 100,  
  19.                         tolerance: "fit",  
  20.                         filter: "li:even"  
  21.                     });  
  22.                 })  
  23.                 </script>  
  24.                 <style>  
  25.                 #select.ui-selecting {  
  26.                     background: ActiveCaption  
  27.                 }  
  28.                   
  29.                 #select.ui-selected {  
  30.                     background: darkgoldenrod  
  31.                 }  
  32.                   
  33.                 #div1 {  
  34.                     background-color: bisque;  
  35.                     width: 100%;  
  36.                     height: 400px;  
  37.                     padding-top: 40px  
  38.                 }  
  39.                   
  40.                 #select {  
  41.                     margin-left: 520px;  
  42.                     font-size: 24px;  
  43.                     width: 100px;  
  44.                     list-style: none;  
  45.                     margin-top: 40px;  
  46.                 }  
  47.                   
  48.                 li {  
  49.                     margin-bottom: 4px;  
  50.                     width: 180px;  
  51.                     text-align: center;  
  52.                 }  
  53.                   
  54.                 span {  
  55.                     margin-left: 420px;  
  56.                     font-size: 30px;  
  57.                 }  
  58.                 </style>  
  59.     </head>  
  60.   
  61.     <body>  
  62.         <form id="form1" runat="server">  
  63.             <div id="div1"> <span>**********Selectable**********</span>  
  64.                 <ul id="select">  
  65.                     <li class="ui-widget-content">Element1</li>  
  66.                     <li class="ui-widget-content">Element2</li>  
  67.                     <li class="ui-widget-content">Element3</li>  
  68.                     <li class="ui-widget-content">Element4</li>  
  69.                     <li class="ui-widget-content">Element5</li>  
  70.                     <li class="ui-widget-content">Element6</li>  
  71.                     <li class="ui-widget-content">Element7</li>  
  72.                     <li class="ui-widget-content">Element8</li>  
  73.                 </ul>  
  74.             </div>  
  75.         </form>  
  76.     </body>  
  77.   
  78.     </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
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.   
  3.     <head>  
  4.         <title></title>  
  5.         <script src="jquery-ui-1.11.4.custom/external/jquery/jquery.js">  
  6.             </script>  
  7.             <script src="jquery-ui-1.11.4.custom/jquery-ui.js">  
  8.                 </script>  
  9.                 <linkhref="jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />  
  10.                 <linkhref="jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />  
  11.                 <linkhref="jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />  
  12.                 <script>  
  13.                 $(document).ready(function ()  
  14.                 {  
  15.                     $("#select").selectable(  
  16.                     {  
  17.                         delay: 100,  
  18.                         distance: 100,  
  19.                         tolerance: "fit",  
  20.                         filter: "li:even",  
  21.                         selected: function ()  
  22.                         {  
  23.                             var text = "";  
  24.                             $(".ui-selected", this).each(function ()  
  25.                             {  
  26.                                 var objIndex = $("#select li").index(this);  
  27.                                 text += "List Item Selected is li" + (objIndex + 1) + " ";  
  28.                             });  
  29.                             $("#span2").empty().append(text);  
  30.                         }  
  31.                     });  
  32.                 })  
  33.                 </script>  
  34.                 <style>  
  35.                 #select.ui-selecting {  
  36.                     background: ActiveCaption  
  37.                 }  
  38.                  
  39.                 #select.ui-selected {  
  40.                     background: darkgoldenrod  
  41.                 }  
  42.                  
  43.                 #div1 {  
  44.                     background-color: bisque;  
  45.                     width: 100%;  
  46.                     height: 440px;  
  47.                     padding-top: 40px  
  48.                 }  
  49.                  
  50.                 #select {  
  51.                     margin-left: 520px;  
  52.                     font-size: 24px;  
  53.                     width: 100px;  
  54.                     list-style: none;  
  55.                     margin-top: 40px;  
  56.                 }  
  57.                   
  58.                 li {  
  59.                     margin-bottom: 4px;  
  60.                     width: 180px;  
  61.                     text-align: center;  
  62.                 }  
  63.                   
  64.                 span {  
  65.                     margin-left: 420px;  
  66.                     font-size: 30px;  
  67.                 }  
  68.                 </style>  
  69.     </head>  
  70.   
  71.     <body>  
  72.         <formid="form1" runat="server">  
  73.             <divid="div1"> <span>**********Selectable**********</span>  
  74.                 <ulid="select">  
  75.                     <liclass="ui-widget-content">Element1</li>  
  76.                     <liclass="ui-widget-content">Element2</li>  
  77.                     <liclass="ui-widget-content">Element3</li>  
  78.                     <liclass="ui-widget-content">Element4</li>  
  79.                     <liclass="ui-widget-content">Element5</li>  
  80.                     <liclass="ui-widget-content">Element6</li>  
  81.                     <liclass="ui-widget-content">Element7</li>  
  82.                     <liclass="ui-widget-content">Element8</li>  
  83.                 </ul>  
  84.                 <span id="span2">No Item is Selected</span>  
  85.             </div>  
  86.         </form>  
  87.     </body>  
  88.   
  89. </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
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs