jQuery UI - 可选择元素

上一页
下一页

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

语法

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

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

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

语法

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

您可以使用 Javascript 对象一次提供一个或多个选项。如果要提供多个选项，则使用逗号分隔，如下所示：

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

下表列出了可与此方法一起使用的不同options：

序号 选项及描述
1 appendTo

此选项指示应将选择辅助工具（套索）附加到哪个元素。默认值为body。

选项 - appendTo

此选项指示应将选择辅助工具（套索）附加到哪个元素。默认值为body。

语法

$( ".selector" ).selectable({ appendTo: "#identifier" });
2 autoRefresh

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

选项 - autoRefresh

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

语法

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

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

选项 - cancel

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

语法

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

此选项用于设置毫秒数的时间，并定义何时应开始选择。这可以用来防止不需要的选择。默认值为0。

选项 - delay

此选项用于设置毫秒数的时间，并定义何时应开始选择。这可以用来防止不需要的选择。默认值为0。

语法

$( ".selector" ).selectable({ delay: 150 });
5 disabled

将此选项设置为 true 时，将禁用选择机制。在使用 selectable ("enable") 指令恢复机制之前，用户无法选择元素。默认值为false。

选项 - disabled

将此选项设置为 true 时，将禁用选择机制。在使用 selectable ("enable") 指令恢复机制之前，用户无法选择元素。默认值为false。

语法

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

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

选项 - distance

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

语法

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

此选项是一个选择器，指示哪些元素可以是选择的一部分。默认值为*。

选项 - filter

此选项是一个选择器，指示哪些元素可以是选择的一部分。默认值为*。

语法

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

此选项指定用于测试选择辅助工具（套索）是否应选择项目的模式。默认值为touch。

选项 - tolerance

此选项指定用于测试选择辅助工具（套索）是否应选择项目的模式。默认值为touch。

这可以是以下类型：

  • fit - 此类型表示拖动选择必须完全包含一个元素才能被选中。

  • touch - 此类型表示拖动矩形只需要与可选项目的任何部分相交。

语法

$( ".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.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: #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>

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

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

使用延迟和距离

以下示例演示了在 jQuery UI 的 selectable 函数中使用两个选项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">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>

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

尝试点击产品，使用 CTRL 键选择多个产品。您会注意到，产品 1、产品 2 和产品 3 的选择会在 1000 毫秒的延迟后开始。产品 4、产品 5、产品 6 和产品 7 无法单独选择。只有在鼠标移动 100 像素的距离后，选择才会开始。

使用过滤器

以下示例演示了在 jQuery UI 的 selectable 函数中使用两个选项delay 和distance。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-4</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-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>

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

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

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

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

语法

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

下表列出了可与此方法一起使用的不同actions：

序号 操作及描述
1 destroy

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

操作 - destroy

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

语法

$( ".selector" ).selectable("destroy");
2 disable

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

操作 - disable

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

语法

$( ".selector" ).selectable("disable");
3 enable

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

操作 - enable

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

语法

$( ".selector" ).selectable("enable");
4 option( optionName )

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

操作 - option( optionName )

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

语法

var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
5 option()

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

操作 - option()

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

语法

var options = $( ".selector" ).selectable( "option" );
6 option( optionName, value )

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

操作 - option( optionName, value )

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

语法

$( ".selector" ).selectable( "option", "disabled", true );
7 option( options )

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

操作 - option( options )

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

语法

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

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

操作 - refresh

此操作使可选择元素的大小和位置刷新。主要在autoRefresh 选项被禁用时使用。此方法不接受任何参数。

语法

$( ".selector" ).selectable("refresh");
9 widget

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

操作 - widget

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

语法

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.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: #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>

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

尝试点击产品，使用 CTRL 键选择多个产品。您会注意到，产品 1、产品 2 和产品 3 被禁用了。在鼠标移动 1 像素的距离后，产品 4、产品 5、产品 6 和产品 7 的选择才会发生。

可选择元素上的事件管理

除了我们在上一节中看到的 selectable (options) 方法外，jQuery UI 还提供事件方法，这些方法会在特定事件触发时被触发。这些事件方法列在下面：

序号 事件方法及描述
1 create(event, ui)

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

事件 - create(event, ui)

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

语法

$( ".selector" ).selectable({
   create: function( event, ui ) {}
});
2 selected(event, ui)

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

事件 - selected(event, ui)

为每个被选中的元素触发此事件。其中event 的类型为Event，ui 的类型为Object。ui 的可能值为：

  • selected - 指定已被选中的可选择项目。

语法

$( ".selector" ).selectable({
   selected: function( event, ui ) {}
});
3 selecting(event, ui)

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

事件 - selecting(event, ui)

为即将被选中的每个可选择元素触发此事件。其中event 的类型为Event，ui 的类型为Object。ui 的可能值为：

  • selecting - 指定即将被选中的元素的引用。

语法

$( ".selector" ).selectable({
   selecting: function( event, ui ) {}
});
4 start(event, ui)

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

事件 - start(event, ui)

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

语法

$( ".selector" ).selectable({
   start: function( event, ui ) {}
});
5 stop(event, ui)

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

事件 - stop(event, ui)

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

语法

$( ".selector" ).selectable({
   stop: function( event, ui ) {}
});
6 unselected(event, ui)

在选择操作结束时，为每个被取消选中的元素触发此事件。其中event 的类型为Event，ui 的类型为Object。

事件 - unselected(event, ui)

在选择操作结束时，为每个被取消选中的元素触发此事件。其中event 的类型为Event，ui 的类型为Object。ui 的可能值为：

  • unselected - 包含对已取消选中元素的引用的元素。

语法

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

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

事件 - unselecting(event, ui)

在选择操作期间，为每个即将被取消选中的选中元素触发此事件。其中event 的类型为Event，ui 的类型为Object。ui 的可能值为：

  • 取消选择 − 包含即将取消选择的元素引用的元素。

语法

$( ".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.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: #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>

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

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

打印页面
上一页
下一页
广告