Saturday, September 21, 2019

jQuery UI Selectable

jQuery UI selectable() method is used to select DOM element individually or in a group. With this method, you can select element by dragging a box with the mouse over the element. You can also use the ctrl button to select more than one element.

Syntax:

You can use the selectable () method in two forms:

  1. $(selector, context).selectable (options) Method  
  1. $(selector, context).selectable ("action", params) Method  

First Method

The selectable (options) method specifies that an HTML element contains selectable items. Here the ?options? parameter is an object that specifies the behavior of the elements involved when selecting.
You can use one or more than one options at a time using JavaScript object. In the case of more than one option, you have to separate them using a comma as follows:
  1. $(selector, context).selectable({option1: value1, option2: value2..... });  
Following is a list of different options that can be used with this method:
OptionDescription
appendToThis option specifies which element the selection helper (the lasso) should be appended to. By default its value is body.
autoRefreshIf you set this option to true, the position and size of each selectable item is computed at the beginning of a select operation. By default its value is true.
cancelThis option forbids selecting if you start selection of elements. By default its value is input, textArea, button, select, option.
delayThis option defines when the selecting should start. It sets the time in millisecond. This can be used to prevent unwanted selections. By default its value is 0.
disabledIf you set this option to true, it disables the selection mechanism. You cannot select the elements until the mechanism is set to enable. able") By default its value is false.
distanceThis option is the distance (in pixels) the mouse must move to consider the selection in progress. This is useful, for example, to prevent simple clicks from being interpreted as a group selection. By default its value is 0.
filterThis option is a selector indicating which elements can be part of the selection. By default its value is *.
toleranceThis option specifies which mode to use for testing whether the selection helper (the lasso) should select an item. By default its value is touch.

jQuery UI selectable() example 1

Let's take a simple example to demonstrate the selectable functionality passing no parameter to the selectable () method.
  1. <!doctype html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI selectable-1</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <style>  
  10.          #selectable-1 .ui-selecting { background: #cdc8b1 ; }  
  11.          #selectable-1 .ui-selected { background: #006400; color: #000000; }  
  12.          #selectable-1 { list-style-type: none; margin: 0;   
  13.             padding: 0; width: 20%; }  
  14.          #selectable-1 li { margin: 3px; padding: 0.4em;   
  15.             font-size: 16px; height: 18px; }  
  16.          .ui-widget-content {  
  17.             background: #00ced1;  
  18.             border: 1px solid #DDDDDD;  
  19.             color: #8b0a50;  
  20.          }  
  21.       </style>  
  22.       <script>  
  23.          $(function() {  
  24.             $( "#selectable-1" ).selectable();  
  25.          });  
  26.       </script>  
  27.    </head>  
  28.    <body>  
  29.       <ol id="selectable-1">  
  30.          <li class="ui-widget-content">Item 1</li>  
  31.          <li class="ui-widget-content">Item 2</li>  
  32.          <li class="ui-widget-content">Item 3</li>  
  33.          <li class="ui-widget-content">Item 4</li>  
  34.          <li class="ui-widget-content">Item 5</li>  
  35.          <li class="ui-widget-content">Item 6</li>  
  36.          <li class="ui-widget-content">Item 7</li>  
  37.       </ol>   
  38.    </body>  
  39. </html>  

jQuery UI selectable() example 2

Use of delay and distance:
The following example demonstrates the use of two options delay and distance.
  1. <!doctype html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI Selectable</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.   
  10.       <style>  
  11.          #selectable-2 .ui-selecting,#selectable-3 .ui-selecting {   
  12.             background: #707070 ; }  
  13.          #selectable-2 .ui-selected,#selectable-3 .ui-selected {   
  14.             background: #EEEEEE; color: #000000; }  
  15.          #selectable-2,#selectable-3 { list-style-type: none; margin: 0;   
  16.             padding: 0; width: 20%; }  
  17.          #selectable-2 li,#selectable-3 li { margin: 3px; padding: 0.4em;   
  18.             font-size: 16px; height: 18px; }  
  19.          .ui-widget-content {  
  20.             background: #cedc98;  
  21.             border: 1px solid #DDDDDD;  
  22.             color: #333333;  
  23.          }  
  24.       </style>  
  25.       <script>  
  26.          $(function() {  
  27.             $( "#selectable-2" ).selectable({  
  28.                delay : 1000  
  29.             });  
  30.             $( "#selectable-3" ).selectable({  
  31.                distance : 100  
  32.             });  
  33.          });  
  34.       </script>  
  35.    </head>  
  36.    <body>  
  37.       <h3>Starts after delay of 1000ms</h3>  
  38.       <ol id="selectable-2">  
  39.          <li class="ui-widget-content">Item 1</li>  
  40.          <li class="ui-widget-content">Item 2</li>  
  41.          <li class="ui-widget-content">Item 3</li>  
  42.       </ol>  
  43.       <h3>Starts after mouse moves distance of 100px</h3>  
  44.       <ol  id="selectable-3">  
  45.          <li class="ui-widget-content">Item 4</li>  
  46.          <li class="ui-widget-content">Item 5</li>  
  47.          <li class="ui-widget-content">Item 6</li>  
  48.          <li class="ui-widget-content">Item 7</li>  
  49.       </ol>  
  50.    </body>  
  51. </html>  

Second Method

  1. $(selector, context).selectable ("action", params)  
The selectable ("action", params) method is used to perform an action on selectable elements, such as preventing selectable functionality. Here "action" is specified as a string in the first argument (e.g., "disable" to stop the selection).
Following is a list of different actions that can be used with this method:

ActionDescription
destroyThis action destroys functionality of an element completely. The elements return to their pre-init state.
disableThis action is used to disable the selectable functionality of an element. This method does not accept any arguments.
enableThis action enables the selectable functionality of an element. This method does not accept any arguments.
option( optionName, value )This action gets the value currently associated with the specified optionName.
option()This action gets an object containing key/value pairs representing the current selectable options hash.
option( optionName, value )This action sets the value of the selectable option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.
option( options )This action is sets one or more options for the selectable. The argument options is a map of option-value pairs to be set.
refreshThis action causes the size and position of the selectable elements to be refreshed. It is used mostly when the autoRefresh option is disabled (set to false). This method does not accept any arguments.
widgetThis action returns a jQuery object containing the selectable element. This method does not accept any arguments.

jQuery UI selectable() example 3

Let's take an example to demonstrate the use of actions from the above table. In the following example, we demonstrate the use of disable() and option( optionName, value ) methods.
  1. <!doctype html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI Selectable</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <style>  
  10.          #selectable-5 .ui-selecting,#selectable-6 .ui-selecting {   
  11.             background: #00bfff; }  
  12.          #selectable-5 .ui-selected,#selectable-6 .ui-selected {   
  13.             background: #EEEEEE; color: #000000; }  
  14.          #selectable-5,#selectable-6 {   
  15.             list-style-type: none; margin: 0; padding: 0; width: 20%; }  
  16.          #selectable-5 li,#selectable-6 li {   
  17.             margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; }  
  18.          .ui-widget-content {  
  19.             background:#b4eeb4;  
  20.             border: 1px solid #DDDDDD;  
  21.             color: #333333;  
  22.          }  
  23.       </style>  
  24.       <script>  
  25.          $(function() {  
  26.             $( "#selectable-5" ).selectable();  
  27.             $( "#selectable-5" ).selectable('disable');  
  28.             $( "#selectable-6" ).selectable();  
  29.             $( "#selectable-6" ).selectable( "option", "distance", 1 );   
  30.          });  
  31.       </script>  
  32.    </head>  
  33.    <body>  
  34.       <h3>Disabled using disable() method</h3>  
  35.       <ol id="selectable-5">  
  36.          <li class="ui-widget-content">Item 1</li>  
  37.          <li class="ui-widget-content">Item 2</li>  
  38.          <li class="ui-widget-content">Item 3</li>  
  39.       </ol>  
  40.       <h3>Select using method option( optionName, value )</h3>  
  41.       <ol  id="selectable-6">  
  42.          <li class="ui-widget-content">Item 4</li>  
  43.          <li class="ui-widget-content">Item 5</li>  
  44.          <li class="ui-widget-content">Item 6</li>  
  45.          <li class="ui-widget-content">Item 7</li>  
  46.       </ol>  
  47.    </body>  
  48. </html>  

jQuery UI selectable() example 4

The following example specifies how to use event method with selectable functionality. In this example, we demonstrate the event "selected" with selectable functionality.
  1. <!doctype html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI selectable-7</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <style>  
  10.          #selectable-7 .ui-selecting { background: #707070 ; }  
  11.          #selectable-7 .ui-selected { background: #006400; color: #000000; }  
  12.          #selectable-7 { list-style-type: none; margin: 0;   
  13.             padding: 0; width: 20%; }  
  14.          #selectable-7 li { margin: 3px; padding: 0.4em;   
  15.             font-size: 16px; height: 18px; }  
  16.          .ui-widget-content {  
  17.             background: #00ffff;  
  18.             border: 1px solid #DDDDDD;  
  19.             color: #333333;  
  20.          }  
  21.          .resultarea {  
  22.             background: red;  
  23.             border-top: 1px solid #000000;  
  24.             border-bottom: 1px solid #000000;  
  25.             color: #333333;  
  26.             font-size:14px;  
  27.          }  
  28.       </style>  
  29.       <script>  
  30.          $(function() {  
  31.             $( "#selectable-7" ).selectable({  
  32.                selected: function() {  
  33.                   var result = $( "#result" ).empty();  
  34.                   $( ".ui-selected", this ).each(function() {  
  35.                      var index = $( "#selectable-7 li" ).index( this );  
  36.                      result.append( " #" + ( index + 1 ) );  
  37.                   });  
  38.                }  
  39.             });  
  40.          });  
  41.       </script>  
  42.    </head>  
  43.    <body>  
  44.       <h3>Events</h3>  
  45.       <ol id="selectable-7">  
  46.          <li class="ui-widget-content">Item 1</li>  
  47.          <li class="ui-widget-content">Item 2</li>  
  48.          <li class="ui-widget-content">Item 3</li>  
  49.          <li class="ui-widget-content">Item 4</li>  
  50.          <li class="ui-widget-content">Item 5</li>  
  51.          <li class="ui-widget-content">Item 6</li>  
  52.          <li class="ui-widget-content">Item 7</li>  
  53.       </ol>  
  54.       <span class="resultarea">Selected Items</span>>  
  55.       <span id=result class="resultarea"></span>  
  56.    </body>  
  57. </html>  
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

How to register multiple implementations of the same interface in Asp.Net Core?

 Problem: I have services that are derived from the same interface. public interface IService { } public class ServiceA : IService { ...