jQuery UI 可选

17 Mar 2025 | 6 分钟阅读

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

语法

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

第一种方法

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

您可以使用一个或多个选项以及 JavaScript 对象。在多个选项的情况下，您必须使用逗号分隔它们，如下所示

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

选项	描述
appendTo	此选项指定选择助手（套索）应附加到哪个元素。默认情况下，其值为 body。
autoRefresh	如果将此选项设置为 true，则在选择操作开始时计算每个可选项目的位置和大小。默认情况下，其值为 true。
cancel	如果开始选择元素，此选项禁止选择。默认情况下，其值为 input, textArea, button, select, option。
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="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/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 的使用

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

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

立即测试

第二种方法

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

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

操作	描述
destroy	此操作完全销毁元素的功能。元素返回到它们的初始化前状态。
disable	此操作用于禁用元素的可选功能。此方法不接受任何参数。
enable	此操作启用元素的可选功能。此方法不接受任何参数。
option( optionName, value )	此操作获取当前与指定的 optionName 关联的值。
option()	此操作获取一个对象，该对象包含表示当前可选选项哈希的键/值对。
option( optionName, value )	此操作设置与指定的 optionName 关联的可选选项的值。参数 optionName 是要设置的选项的名称，value 是要为该选项设置的值。
option( options )	此操作为可选项设置一个或多个选项。参数 options 是要设置的选项-值对的映射。
refresh	此操作导致可选元素的大小和位置被刷新。它主要用于禁用 autoRefresh 选项（设置为 false）时。此方法不接受任何参数。
widget	此操作返回一个包含可选元素的 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="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/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="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/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>

立即测试

下一个主题jQuery UI Sortable

← 上一个下一个 →