JqueryUI - 可选择

jQueryUI 提供 selectable() 方法来单独或成组地选择 DOM 元素。使用此方法，可以通过将鼠标悬停在元素上拖动框（有时称为套索）来选择元素。此外，还可以通过按住 Ctrl/Meta 键的同时单击或拖动来选择元素，从而允许进行多个（不连续）选择。

句法

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

$(选择器,上下文).selectable(选项)方法

selectable (options)方法声明 HTML 元素包含可选择的项目。options参数是一个对象，指定选择时涉及的元素的Behave。

句法

$(selector, context).selectable (options);

您可以使用 Javascript 对象一次提供一个或多个选项。如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 -

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

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

先生。 选项和说明
1 附加到

此选项告诉选择助手（套索）应附加到哪个元素。默认情况下它的值为body。

选项 - 追加到

此选项告诉选择助手（套索）应附加到哪个元素。默认情况下它的值为body。

句法

$( ".selector" ).selectable({ appendTo: "#identifier" });
2 自动刷新

如果此选项设置为true，则在选择操作开始时计算每个可选项目的位置和大小。默认情况下它的值为true。

选项 - 自动刷新

如果此选项设置为true，则在选择操作开始时计算每个可选项目的位置和大小。默认情况下它的值为true。如果您有很多项目，您可能需要将其设置为false并手动调用刷新（）方法。

句法

$( ".selector" ).selectable({ autoRefresh: false });
3 取消

如果开始选择元素，此选项将禁止选择。默认情况下，其值为input,textarea,button,select,option。

选项 - 取消

如果开始选择元素，此选项将禁止选择。默认情况下，其值为input,textarea,button,select,option。

句法

$( ".selector" ).selectable({ cancel: "a,.cancel" });
4 延迟

此选项用于设置时间（以毫秒为单位）并定义何时开始选择。这可以用来防止不必要的选择。默认情况下其值为0。

选项 - 延迟

此选项用于设置时间（以毫秒为单位）并定义何时开始选择。这可以用来防止不必要的选择。默认情况下其值为0。

句法

$( ".selector" ).selectable({ delay: 150 });
5 残疾人

当此选项设置为 true 时，将禁用选择机制。在使用可选择（“启用”）指令恢复机制之前，用户无法选择元素。默认情况下它的值为false。

选项 - 禁用

当此选项设置为 true 时，将禁用选择机制。在使用可选择（“启用”）指令恢复机制之前，用户无法选择元素。默认情况下它的值为false。

句法

$( ".selector" ).selectable({ disabled: true });
6 距离

此选项是鼠标必须移动以考虑正在进行的选择的距离（以像素为单位）。例如，这对于防止简单的点击被解释为组选择很有用。默认情况下其值为0。

选项 - 距离

此选项是鼠标必须移动以考虑正在进行的选择的距离（以像素为单位）。例如，这对于防止简单的点击被解释为组选择很有用。默认情况下其值为0。

句法

$( ".selector" ).selectable({ distance: 30 });
7 筛选

该选项是一个选择器，指示哪些元素可以成为选择的一部分。默认情况下其值为*。

选项 - 过滤器

该选项是一个选择器，指示哪些元素可以成为选择的一部分。默认情况下其值为*。

句法

$( ".selector" ).selectable({ filter: "li" });
8 宽容

此选项指定使用哪种模式来测试选择助手（套索）是否应选择一个项目。默认情况下它的值为touch。

选项 - 公差

此选项指定使用哪种模式来测试选择助手（套索）是否应选择一个项目。默认情况下它的值为touch。

这可以是类型 -

  • fit - 此类型表示拖动选择必须完全包含要选择的元素。

  • touch − This type indicates the drag rectangle only needs to intersect any portion of the selectable item.

Syntax

$( ".selector" ).selectable({ tolerance: "fit" });

以下部分将向您展示一些可选功能的工作示例。

默认功能

以下示例演示了可选功能的简单示例，未向selectable()方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-1</title>
      <link href = "https://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: #707070 ; }
         #selectable-1 .ui-selected { background: #EEEEEE; 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: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-1" ).selectable();
         });
      </script>
   </head>
   
   <body>
      <ol id = "selectable-1">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol> 
   </body>
</html>

让我们将上面的代码保存在 HTML 文件selectableexample.htm中，并在支持 JavaScript 的标准浏览器中打开它，您应该看到以下输出。现在，您可以使用结果 -

尝试点击产品，使用CTRLS键选择多个产品。

利用延迟和距离

下面的例子演示了JqueryUI的selectable函数中delay和distance两个选项的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</title>
      <link href = "https://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">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Starts after mouse moves distance of 100px</h3>
      <ol id = "selectable-3">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件selectableexample.htm中，并在支持 JavaScript 的标准浏览器中打开它，您应该看到以下输出。现在，您可以使用结果 -

尝试点击产品，使用CTRL键选择多个产品。您会注意到，产品 1、产品 2 和产品 3 的选择在 1000 毫秒的延迟后开始。产品 4、产品 5、产品 6 和产品 7 的选择不能单独完成。仅当鼠标移动 100px 距离后才开始选择。

过滤器的使用

下面的例子演示了JqueryUI的selectable函数中delay和distance两个选项的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-4</title>
      <link href = "https://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-4 .ui-selecting { background: #707070 ; }
         #selectable-4 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-4 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-4" ).selectable({
               filter : "li:first-child"
            });
         });
      </script>
   </head>
   
   <body>
      <ol id = "selectable-4">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件selectableexample.htm中，并在支持 JavaScript 的标准浏览器中打开它，您应该看到以下输出。现在，您可以使用结果 -

尝试点击产品。您会注意到只能选择第一个产品。

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

selectable ("action", params)方法可以对可选元素执行操作，例如阻止可选功能。该操作被指定为第一个参数中的字符串（例如，“禁用”以停止选择）。查看下表中可以通过的操作。

句法

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

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

先生。 动作与描述
1 破坏

此操作完全删除元素的可选功能。元素返回到其初始化前的状态。

Action - destroy

This action removes the selectable functionality of an element completely. The elements return to their pre-init state.

Syntax

$( ".selector" ).selectable("destroy");
2 禁用

此操作会停用元素的可选功能。此方法不接受任何参数。

Action - disable

This action removes the selectable functionality of an element completely. The elements return to their pre-init state.

Syntax

$( ".selector" ).selectable("disable");
3 使能够

此操作启用元素的可选功能。此方法不接受任何参数。

Action - enable

This action enables the selectable functionality of an element. This method does not accept any arguments.

Syntax

$( ".selector" ).selectable("enable");
4 选项（选项名称）

此操作获取当前与指定optionName关联的值。

Action - option( optionName )

This action gets the value currently associated with the specified optionName.

Syntax

var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
5 选项（）

此操作获取一个对象，其中包含表示当前可选选项哈希的键/值对。

Action - option()

This action gets an object containing key/value pairs representing the current selectable options hash.

Syntax

var options = $( ".selector" ).selectable( "option" );
6 选项（选项名称，值）

此操作设置与指定optionName关联的可选选项的值。参数optionName是要设置的选项的名称，value是要为该选项设置的值。

Action - 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.

Syntax

$( ".selector" ).selectable( "option", "disabled", true );
7 选项（选项）

此操作设置一个或多个可选选项。参数options是要设置的选项值对的映射。

Action - 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.

Syntax

$( ".selector" ).selectable( "option", { disabled: true } );
8 刷新

此操作会导致可选元素的大小和位置被刷新。主要在禁用autoRefresh选项（设置为false ）时使用。此方法不接受任何参数。

Action - refresh

This action causes the size and position of the selectable elements to be refreshed. Used mostly when the autoRefresh option is disabled. This method does not accept any arguments.

Syntax

$( ".selector" ).selectable("refresh");
9 小部件

此操作返回一个包含可选择元素的 jQuery 对象。此方法不接受任何参数。

Action - widget

This action returns a jQuery object containing the selectable element. This method does not accept any arguments.

Syntax

var widget = $( ".selector" ).selectable( "widget" );

例子

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</title>
      <link href = "https://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: #707070 ; }
         #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: #cedc98;
            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">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Select using method option( optionName, value )</h3>
      <ol id = "selectable-6">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件selectableexample.htm中，并在支持 javascript 的标准浏览器中打开它，您应该看到以下输出 -

尝试点击产品，使用CTRL键选择多个产品。您会注意到产品 1、产品 2 和产品 3 已被禁用。鼠标移动 1px 距离后，将选择产品 4、产品 5、产品 6 和产品 7。

可选元素的事件管理

除了我们在前面几节中看到的可选择（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。下面列出了这些事件方法 -

先生。 活动方式及说明
1 创建（事件，用户界面）

创建可选择元素时会触发此事件。其中event的类型为Event，而ui的类型为Object。

Event - create(event, ui)

This event is triggered when the selectable element is created. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).selectable({
   create: function( event, ui ) {}
});
2 选定（事件，用户界面）

对于每个被选中的元素都会触发此事件。其中event的类型为Event，而ui的类型为Object。

Event - selected(event, ui)

This event is triggered for each element that becomes selected. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • selected − This specifies the selectable item that has been selected..

Syntax

$( ".selector" ).selectable({
   selected: function( event, ui ) {}
});
3 选择（事件，用户界面）

对于每个即将被选择的可选元素都会触发此事件。其中event的类型为Event，而ui的类型为Object。

Event - selecting(event, ui)

This event is triggered for each selectable element that’s about to get selected. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • selecting − This specifies a reference to the element that’s about to become selected.

Syntax

$( ".selector" ).selectable({
   selecting: function( event, ui ) {}
});
4 开始（事件，用户界面）

该事件在选择操作开始时触发。其中event的类型为Event，而ui的类型为Object。

Event - start(event, ui)

This event is triggered at the beginning of the select operation. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).selectable({
   start: function( event, ui ) {}
});
5 停止（事件，用户界面）

该事件在选择操作结束时触发。其中event的类型为Event，而ui的类型为Object。

Event - stop(event, ui)

This event is triggered at the end of the select operation. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).selectable({
   stop: function( event, ui ) {}
});
6 未选择（事件，用户界面）

对于每个未选择的元素，在选择操作结束时会触发此事件。其中event的类型为Event，而ui的类型为Object。

Event - unselected(event, ui)

This event is triggered at the end of the select operation for each element that becomes unselected. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • unselected − An element that contains a reference to the element that has become unselected.

Syntax

$( ".selector" ).selectable({
   unselected: function( event, ui ) {}
});
7 取消选择（事件，ui）

在对即将取消选择的每个选定元素进行选择操作期间会触发此事件。其中event的类型为Event，而ui的类型为Object。

Event - unselecting(event, ui)

This event is triggered during select operation for each selected element that’s about to become unselected. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • unselecting − An element that contains a reference to the element that’s about to become unselected.

Syntax

$( ".selector" ).selectable({
   unselecting: function( event, ui ) {}
});

例子

以下示例演示了可选功能期间事件方法的使用。此示例演示了selected事件的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-7</title>
      <link href = "https://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: #EEEEEE; 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: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .resultarea {
            background: #cedc98;
            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">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
      <span class = "resultarea">Selected Product</span>>
      <span id = result class = "resultarea"></span>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件selectableexample.htm中，并在支持 javascript 的标准浏览器中打开它，您应该看到以下输出 -

尝试点击产品，使用CTRL键选择多个产品。您会注意到所选的产品编号打印在底部。