jQueryUI

jQuery UI Selectable

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

语法:

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

 $(selector, context).selectable (options) 方法

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

第一个方法

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

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

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

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

选项	说明
appendTo	此选项指定选择助手(套索)应附加到哪个元素。默认情况下，其值为body。
autoRefresh	如果将此选项设置为true，则在选择操作开始时将计算每个可选项目的位置和大小。默认情况下，其值为true。
cancel	此选项禁止选择是否开始选择元素。默认情况下，其值为输入，textArea，按钮，选择，选项。
delay	此选项定义何时开始选择。它以毫秒为单位设置时间。这可以用来防止不必要的选择。默认情况下，其值为0。
disabled	如果将此选项设置为true，它将禁用选择机制。在机制设置为启用之前，您无法选择元素。能")，默认情况下，其值为false。
distance	此选项是鼠标在考虑正在进行的选择时必须移动的距离(以像素为单位)。例如，这有助于防止简单的点击被解释为组选择。默认情况下，其值为0。
filter	此选项是一个选择器，指示哪些元素可以成为选择的一部分。默认情况下，其值为*。
tolerance	此选项指定用于测试选择助手(套索)是否应选择项目的模式。默认情况下，其值为touch。

jQuery UI selectable()示例1

让我们看一个简单的示例，以演示没有参数传递给selectable()方法的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="http://code.jquery.com/jquery-1.10.2.js"></script>
       <script src="http://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

延迟和距离的使用:

以下示例演示了延迟和距离这两个选项。

 <!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="http://code.jquery.com/jquery-1.10.2.js"></script>
       <script src="http://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)

selectable ("action", params)方法用于对可选元素执行操作，例如阻止可选功能。在这里，"action"在第一个参数中指定为字符串(例如，"disable"以停止选择)。

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

动作	说明
destroy	此操作将完全destroy元素的功能。元素返回其初始状态。
disable	此操作用于禁用元素的可选功能。此方法不接受任何参数。
enable	此操作启用元素的可选功能。此方法不接受任何参数。
option(optionName，value)	此操作获取当前与指定的optionName关联的值。
option()	此操作将获取一个对象，该对象包含表示当前可选选项哈希的键/值对。
option(optionName，value)	此操作设置与指定的optionName关联的可选选项的值。参数optionName是要设置的选项的名称，value是要为该选项设置的值。
option(options)	此操作为可选项设置一个或多个选项。 options参数是要设置的选项-值对的映射。
refresh	此操作将导致刷新可选元素的大小和位置。通常在禁用autoRefresh选项(设置为false)时使用。此方法不接受任何参数。
widget	此操作返回一个包含selectable元素的jQuery对象。此方法不接受任何参数。

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="http://code.jquery.com/jquery-1.10.2.js"></script>
       <script src="http://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

以下示例指定如何使用具有可选功能的事件方法。在此示例中，我们演示具有可选功能的事件
"selected" 。

 <!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="http://code.jquery.com/jquery-1.10.2.js"></script>
       <script src="http://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>

jQueryUI

jQuery UI resizable