Categories
JqueryUI教程

jQuery UI selectable()方法

jQuery UI selectable()方法

jQuery UI selectable()方法用于单独或成组选择DOM元素。使用此方法,可以通过用鼠标在元素上拖动一个框来选择元素。您也可以使用ctrl按钮选择多个元素。

句法:

您可以两种形式使用selectable()方法:

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

第一种方法

selectable(选项)方法指定HTML元素包含可选项。这里的选项?参数是一个对象,它指定选择时涉及的元素的行为。

您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项,则必须使用逗号将它们分开,如下所示:

$(selector, context).selectable({option1: value1, option2: value2..... });

以下是可与该方法一起使用的不同选项的列表:

Option Description
appendTo This option specifies which element the selection helper (the lasso) should be appended to. By default its value is body.
autoRefresh If 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.
cancel This option forbids selecting if you start selection of elements. By default its value is input, textArea, button, select, option.
delay This 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.
disabled If 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.
distance This 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.
filter This option is a selector indicating which elements can be part of the selection. By default its value is *.
tolerance This 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()示例1

让我们以一个简单的示例来演示不向selectable()方法传递任何参数的可选择功能。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI selectable-1</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #selectable-1 .ui-selecting { background: #cdc8b1 ; }
         #selectable-1 .ui-selected { background: #006400; color: #000000; }
         #selectable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-1 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #00ced1;
            border: 1px solid #DDDDDD;
            color: #8b0a50;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-1" ).selectable();
         });
      </script>
   </head>
   <body>
      <ol id="selectable-1">
         <li class="ui-widget-content">Item 1</li>
         <li class="ui-widget-content">Item 2</li>
         <li class="ui-widget-content">Item 3</li>
         <li class="ui-widget-content">Item 4</li>
         <li class="ui-widget-content">Item 5</li>
         <li class="ui-widget-content">Item 6</li>
         <li class="ui-widget-content">Item 7</li>
      </ol> 
   </body>
</html>

jQuery UI selectable()示例2

使用延迟和距离:

下面的示例演示了两个选项delay和distance的使用。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Selectable</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #selectable-2 .ui-selecting,#selectable-3 .ui-selecting { 
            background: #707070 ; }
         #selectable-2 .ui-selected,#selectable-3 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-2,#selectable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-2 li,#selectable-3 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-2" ).selectable({
               delay : 1000
            });
            $( "#selectable-3" ).selectable({
               distance : 100
            });
         });
      </script>
   </head>
   <body>
      <h3>Starts after delay of 1000ms</h3>
      <ol id="selectable-2">
         <li class="ui-widget-content">Item 1</li>
         <li class="ui-widget-content">Item 2</li>
         <li class="ui-widget-content">Item 3</li>
      </ol>
      <h3>Starts after mouse moves distance of 100px</h3>
      <ol  id="selectable-3">
         <li class="ui-widget-content">Item 4</li>
         <li class="ui-widget-content">Item 5</li>
         <li class="ui-widget-content">Item 6</li>
         <li class="ui-widget-content">Item 7</li>
      </ol>
   </body>
</html>

第二种方法

$(selector, context).selectable ("action", params)

可选(“操作”,参数)方法用于对可选元素执行操作,例如阻止可选功能。在这里,“操作”被指定为第一个参数中的字符串(例如,“禁用”以停止选择)。

以下是可与该方法一起使用的不同操作的列表:

Action Description
destroy This action destroys functionality of an element completely. The elements return to their pre-init state.
disable This action is used to disable the selectable functionality of an element. This method does not accept any arguments.
enable This 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.
refresh This 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.
widget This action returns a jQuery object containing the selectable element. This method does not accept any arguments.

jQuery UI selectable()示例3

让我们以一个示例来演示上表中动作的用法。在以下示例中,我们演示了disable()和option(optionName,value)方法的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Selectable</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #selectable-5 .ui-selecting,#selectable-6 .ui-selecting { 
            background: #00bfff; }
         #selectable-5 .ui-selected,#selectable-6 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-5,#selectable-6 { 
            list-style-type: none; margin: 0; padding: 0; width: 20%; }
         #selectable-5 li,#selectable-6 li { 
            margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; }
         .ui-widget-content {
            background:#b4eeb4;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-5" ).selectable();
            $( "#selectable-5" ).selectable('disable');
            $( "#selectable-6" ).selectable();
            $( "#selectable-6" ).selectable( "option", "distance", 1 );    
         });
      </script>
   </head>
   <body>
      <h3>Disabled using disable() method</h3>
      <ol id="selectable-5">
         <li class="ui-widget-content">Item 1</li>
         <li class="ui-widget-content">Item 2</li>
         <li class="ui-widget-content">Item 3</li>
      </ol>
      <h3>Select using method option( optionName, value )</h3>
      <ol  id="selectable-6">
         <li class="ui-widget-content">Item 4</li>
         <li class="ui-widget-content">Item 5</li>
         <li class="ui-widget-content">Item 6</li>
         <li class="ui-widget-content">Item 7</li>
      </ol>
   </body>
</html>


jQuery UI selectable()示例4

以下示例指定如何使用具有可选功能的事件方法。在此示例中,我们演示了具有可选功能的“已选择”事件。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI selectable-7</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #selectable-7 .ui-selecting { background: #707070 ; }
         #selectable-7 .ui-selected { background: #006400; color: #000000; }
         #selectable-7 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-7 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #00ffff;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .resultarea {
            background: red;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-7" ).selectable({
               selected: function() {
                  var result = $( "#result" ).empty();
                  $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable-7 li" ).index( this );
                     result.append( " #" + ( index + 1 ) );
                  });
               }
            });
         });
      </script>
   </head>
   <body>
      <h3>Events</h3>
      <ol id="selectable-7">
         <li class="ui-widget-content">Item 1</li>
         <li class="ui-widget-content">Item 2</li>
         <li class="ui-widget-content">Item 3</li>
         <li class="ui-widget-content">Item 4</li>
         <li class="ui-widget-content">Item 5</li>
         <li class="ui-widget-content">Item 6</li>
         <li class="ui-widget-content">Item 7</li>
      </ol>
      <span class="resultarea">Selected Items</span>>
      <span id=result class="resultarea"></span>
   </body>
</html>


error: 内容受到保护 !!