HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

JqueryUI - Selectable 选择方法

jQueryUI 提供了 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..... });

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

序号 选项 & 说明
1 appendTo

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

Option - appendTo

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

语法

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

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

Option - autoRefresh

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

语法

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

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

Option - cancel

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

语法

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

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

Option - delay

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

语法

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

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

Option - disabled

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

语法

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

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

Option - distance

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

语法

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

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

Option - filter

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

语法

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

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

Option - 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.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 键选择多个产品。

delay 和 distance 的使用

下面的例子演示了在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) 方法可以对可选元素执行操作，例如阻止可选功能。 该操作在第一个参数中指定为字符串（例如，"disable"以停止选择）。 在下表中查看可以传递的操作。

语法

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

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

序号 操作 & 说明
1 destroy

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

Action - destroy

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

语法

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

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

Action - disable

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

语法

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

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

Action - enable

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

语法

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

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

Action - option( optionName )

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

语法

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

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

Action - option()

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

语法

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

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

Action - option( optionName, value )

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

语法

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

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

Action - option( options )

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

语法

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

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

Action - refresh

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

语法

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

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

Action - 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.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 被禁用。 Product 4、Product 5、Product 6 和 Product 7 的选择发生在鼠标移动 1px 的距离后。

可选元素的事件管理

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

序号 事件方法 & 说明
1 create(event, ui)

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

Event - create(event, ui)

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

语法

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

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

Event - selected(event, ui)

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

  • selected − 这指定了已选择的可选项目

语法

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

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

Event - selecting(event, ui)

每个即将被选中的可选元素都会触发此事件。 其中event是Event类型，ui是Object类型。 ui 的可能值是 −

  • selecting − 这指定了对即将被选中的元素的引用。

语法

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

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

Event - start(event, ui)

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

语法

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

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

Event - stop(event, ui)

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

语法

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

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

Event - unselected(event, ui)

对于每个未选中的元素，在选择操作结束时触发此事件。 其中event是Event类型，ui是Object类型。 ui 的可能值是 −

  • unselected − 包含对已取消选择的元素的引用的元素。

语法

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

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

Event - unselecting(event, ui)

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

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

语法

$( ".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 键选择多个产品。 您会注意到所选的产品编号打印在底部。

❮ 上一节 下一节 ❯