📅 最后修改于: 2020-11-27 01:56:39 🧑 作者: Mango
jQuery UI selectable()方法用于单独或成组选择DOM元素。使用此方法，可以通过用鼠标在元素上拖动一个框来选择元素。您也可以使用ctrl按钮选择多个元素。
句法：
您可以两种形式使用selectable()方法：
$(selector, context).selectable (options) Method
$(selector, context).selectable ("action", params) Method
selectable(选项)方法指定HTML元素包含可选项。这里的选项?参数是一个对象，它指定选择时涉及的元素的行为。
您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示：
$(selector, context).selectable({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表：
| Option | Description |
|---|---|
| appendTo | This option specifies which element the selection helper (the lasso) should be appended to. By default its value is body. |
| autoRefresh | If you set this option to true, the position and size of each selectable item is computed at the beginning of a select operation. By default its value is true. |
| cancel | This option forbids selecting if you start selection of elements. By default its value is input, textArea, button, select, option. |
| delay | This option defines when the selecting should start. It sets the time in millisecond. This can be used to prevent unwanted selections. By default its value is 0. |
| disabled | If you set this option to true, it disables the selection mechanism. You cannot select the elements until the mechanism is set to enable. able”) By default its value is false. |
| distance | This option is the distance (in pixels) the mouse must move to consider the selection in progress. This is useful, for example, to prevent simple clicks from being interpreted as a group selection. By default its value is 0. |
| filter | This option is a selector indicating which elements can be part of the selection. By default its value is *. |
| tolerance | This option specifies which mode to use for testing whether the selection helper (the lasso) should select an item. By default its value is touch. |
让我们以一个简单的示例来演示不向selectable()方法传递任何参数的可选择功能。
jQuery UI selectable-1
使用延迟和距离：
下面的示例演示了两个选项delay和distance的使用。
jQuery UI Selectable
Starts after delay of 1000ms
Starts after mouse moves distance of 100px
$(selector, context).selectable ("action", params)
可选(“操作”，参数)方法用于对可选元素执行操作，例如阻止可选功能。在这里，“操作”被指定为第一个参数中的字符串(例如，“禁用”以停止选择)。
以下是可与该方法一起使用的不同操作的列表：
| Action | Description |
|---|---|
| destroy | This action destroys functionality of an element completely. The elements return to their pre-init state. |
| disable | This action is used to disable the selectable functionality of an element. This method does not accept any arguments. |
| enable | This action enables the selectable functionality of an element. This method does not accept any arguments. |
| option( optionName, value ) | This action gets the value currently associated with the specified optionName. |
| option() | This action gets an object containing key/value pairs representing the current selectable options hash. |
| 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. |
| 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. |
| refresh | This action causes the size and position of the selectable elements to be refreshed. It is used mostly when the autoRefresh option is disabled (set to false). This method does not accept any arguments. |
| widget | This action returns a jQuery object containing the selectable element. This method does not accept any arguments. |
让我们以一个示例来演示上表中动作的用法。在以下示例中，我们演示了disable()和option(optionName，value)方法的用法。
jQuery UI Selectable
Disabled using disable() method
Select using method option( optionName, value )
以下示例指定如何使用具有可选功能的事件方法。在此示例中，我们演示了具有可选功能的“已选择”事件。
jQuery UI selectable-7
Events
Selected Items>