jQueryUI提供了selectable()方法来单独或在组中选择DOM元素.使用此方法,可以通过使用鼠标在元素上拖动框(有时称为套索)来选择元素.此外,可以通过在按住Ctrl/Meta键的同时单击或拖动来选择元素,从而允许多个(非连续)选择.
selectable()方法可以两种形式使用 :
$(selector, context).selectable (options) 方法
$(selector, context).selectable ("action", params) 方法
selectable(options)方法声明HTML元素包含可选项. options 参数是一个对象,它指定选择时涉及的元素的行为.
$(selector, context).selectable (options);
您可以使用Javascript对象一次提供一个或多个选项.如果要提供多个选项,那么您将使用逗号分隔它们,如下所示;
$(selector, context).selectable({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同选项 :
Sr.No. | 选项&描述 |
---|---|
1 | appendTo 此选项告诉选择助手(套索)应追加哪个元素.默认情况下,其值为正文. 选项 - appendTo 此选项告诉应该将选择助手(套索)附加到哪个元素.默认情况下,其值为 body . 语法 $(".selector").selectlect({appendTo:"#identifier"}); |
2 | autoRefresh 此选项如果设置为 true ,则在选择操作开始时计算每个可选项的位置和大小.默认情况下,其值为 true . 选项 - autoRefresh 此选项如果设置为 true ,则在选择操作开始时计算每个可选项的位置和大小.默认情况下,其值为 true .如果您有许多项目,您可能需要将其设置为 false 并手动调用 refresh()方法. 语法 $(".selector").select({autoRefresh:false}); |
3 | cancel 此选项禁止选择是否开始选择元素.默认情况下,其值为输入,文本区域,按钮,选择,选项. 选项 - 取消 此选项禁止选择是否开始选择元素.默认情况下,其值为输入,文本区域,按钮,选择,选项. 语法 $(".selector").selectlect({cancel:"a .cancel"}); |
4 | delay 此选项用于设置以毫秒为单位的时间,并定义何时开始选择.这可用于防止不必要的选择.默认情况下,其值为 0 . 选项 - 延迟 此选项用于设置以毫秒为单位的时间,并定义何时开始选择.这可用于防止不必要的选择.默认情况下,其值为 0 . 语法 $(".selector").selectlect({delay:150}); |
5 | disabled 此选项设置为true时,禁用选择机制.在使用可选择("enable")指令恢复机制之前,用户无法选择元素.默认情况下,其值为 false . 选项 - 已停用 此选项设置为true时,禁用选择机制.在使用可选择("enable")指令恢复机制之前,用户无法选择元素.默认情况下,其值为 false . 语法 $(".selector").selectlect({disabled:true}); |
6 | distance 此选项是鼠标必须移动以考虑正在进行的选择的距离(以像素为单位).例如,这有助于防止简单点击被解释为组选择.默认情况下,其值为 0 . 选项 - 距离 此选项是鼠标必须移动以考虑正在进行的选择的距离(以像素为单位).例如,这有助于防止简单点击被解释为组选择.默认情况下,其值为 0 . 语法 $(".selector").select({distance:30}); |
7 | filter 此选项是一个选择器,指示哪些元素可以作为选择的一部分.默认情况下,其值为 * . 选项 - 过滤器 此选项是一个选择器,指示哪些元素可以作为选择的一部分.默认情况下,其值为 * . 语法 $(".selector").selectlect({filter:"li"}); |
8 | tolerance 此选项指定用于测试选择助手(套索)是否应选择项目的模式.默认情况下,其值为触摸. 选项 - 容差 此选项指定用于测试选择助手(套索)是否应选择项目的模式.默认情况下,其值为触摸. 这可以是 :
语法 $(".selector").selectlect({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的可选功能中两个选项延迟和距离的用法。
<!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的选择在延迟1000ms后开始。 产品4,产品5,产品6和产品7的选择不能单独进行。 只有在鼠标移动100px的距离后才会开始选择。
以下示例演示了JqueryUI的可选功能中两个选项延迟和距离的用法。
<!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的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果
尝试点击产品。 您会注意到只能选择第一个产品。
可选择的("action",params)方法可以对可选元素执行操作,例如防止可选功能。 该动作在第一个参数中被指定为一个字符串(例如,"禁用"以停止选择)。 请查看下表中可以传递的操作。
$(selector, context).selectable ("action", params);;
下表列出了可以与此方法一起使用的不同操作
Sr.No. | Action & Description |
---|---|
1 | destroy 此操作完全删除元素的可选功能。 元素返回到pre-init状态。 Action - destroy 此操作完全删除元素的可选功能。 元素返回到pre-init状态。 Syntax $( ".selector" ).selectable("destroy"); |
2 | disable 此操作将停用元素的可选功能。 此方法不接受任何参数。 Action - disable 此操作完全删除元素的可选功能。 元素返回到pre-init状态。 Syntax $( ".selector" ).selectable("disable"); |
3 | enable 此操作启用元素的可选功能。 此方法不接受任何参数。 Action - enable 此操作启用元素的可选功能。 此方法不接受任何参数。 Syntax $( ".selector" ).selectable("enable"); |
4 | option( optionName ) 此操作获取当前与指定的optionName关联的值。 Action - option( optionName ) 此操作获取当前与指定的optionName关联的值。 Syntax var isDisabled = $( ".selector" ).selectable( "option", "disabled" ); |
5 | option() 此操作获取包含表示当前可选选项哈希的键/值对的对象。 Action - option() 此操作获取包含表示当前可选选项哈希的键/值对的对象。 Syntax var options = $( ".selector" ).selectable( "option" ); |
6 | option( optionName, value ) 此操作设置与指定的optionName关联的可选选项的值。 参数optionName是要设置的选项的名称,value是要为该选项设置的值。 Action - option( optionName, value ) 此操作设置与指定的optionName关联的可选选项的值。 参数optionName是要设置的选项的名称,value是要为该选项设置的值。 Syntax $( ".selector" ).selectable( "option", "disabled", true ); |
7 | option( options ) 此操作为可选择设置一个或多个选项。 参数选项是要设置的选项 - 值对的映射。 Action - option( options ) 此操作为可选择设置一个或多个选项。 参数选项是要设置的选项 - 值对的映射。 Syntax $( ".selector" ).selectable( "option", { disabled: true } ); |
8 | refresh 此操作会导致刷新可选元素的大小和位置。 主要用于禁用autoRefresh选项(设置为false)。 此方法不接受任何参数。 Action - refresh 此操作会导致刷新可选元素的大小和位置。 主要在禁用autoRefresh选项时使用。 此方法不接受任何参数。 Syntax $( ".selector" ).selectable("refresh"); |
9 | widget 此操作返回包含可选元素的jQuery对象。 此方法不接受任何参数。 Action - widget 此操作返回包含可选元素的jQuery对象。 此方法不接受任何参数。 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。 产品4,产品5,产品6和产品7的选择发生在鼠标移动1px的距离之后。
除了我们在前面几节中看到的selectable(options)方法之外,JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下所列
Sr.No. | Event Method & Description |
---|---|
1 | create(event, ui) 创建可选元素时会触发此事件。 其中event是Event类型,ui是Object类型。 Event - create(event, ui) 创建可选元素时会触发此事件。 其中event是Event类型,ui是Object类型。 Syntax $( ".selector" ).selectable({ create: function( event, ui ) {} }); |
2 | selected(event, ui) 为每个被选中的元素触发此事件。 其中event是Event类型,ui是Object类型。 Event - selected(event, ui) 为每个被选中的元素触发此事件。 其中event是Event类型,ui是Object类型。 ui的可能值是
Syntax $( ".selector" ).selectable({ selected: function( event, ui ) {} }); |
3 | selecting(event, ui) 将为即将被选中的每个可选元素触发此事件。 其中event是Event类型,ui是Object类型。 Event - selecting(event, ui) 将为即将被选中的每个可选元素触发此事件。 其中event是Event类型,ui是Object类型。 ui的可能值是
Syntax $( ".selector" ).selectable({ selecting: function( event, ui ) {} }); |
4 | start(event, ui) 此事件在选择操作开始时触发。 其中event是Event类型,ui是Object类型。 Event - start(event, ui) 此事件在选择操作开始时触发。 其中event是Event类型,ui是Object类型。 Syntax $( ".selector" ).selectable({ start: function( event, ui ) {} }); |
5 | stop(event, ui) 此事件在选择操作结束时触发。 其中event是Event类型,ui是Object类型。 Event - stop(event, ui) 此事件在选择操作结束时触发。 其中event是Event类型,ui是Object类型。 Syntax $( ".selector" ).selectable({ stop: function( event, ui ) {} }); |
6 | unselected(event, ui) 对于未选中的每个元素,在选择操作结束时触发此事件。 其中event是Event类型,ui是Object类型。 Event - unselected(event, ui) 对于未选中的每个元素,在选择操作结束时触发此事件。 其中event是Event类型,ui是Object类型。 ui的可能值是
Syntax $( ".selector" ).selectable({ unselected: function( event, ui ) {} }); |
7 | unselecting(event, ui) 在选择操作期间,将针对即将取消选择的每个所选元素触发此事件。 其中event是Event类型,ui是Object类型。 Event - unselecting(event, ui) 在选择操作期间,将针对即将取消选择的每个所选元素触发此事件。 其中event是Event类型,ui是Object类型。 ui的可能值是
Syntax $( ".selector" ).selectable({ unselecting: function( event, ui ) {} }); |
以下示例演示了可选功能期间的事件方法用法。 此示例演示了所选事件的使用。
<!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键选择多个产品。 您会注意到所选的产品编号打印在底部。