jQuery UI Selectable widget() 方法

jQuery UI Selectable widget() 方法定义了一种方便的方式，可让用户通过单击和拖动选择一组元素。它包含了一些选项，可以自定义选择行为。

语法

$( ".selector" ).selectable({
   options...
});

选项

• appendTo: 选择器中选择的元素（或元素）将被添加到此选项中提供的元素中。默认为"body"。
• autoRefresh: 当设置为true时，当选择期间的元素位置发生变化时，选择区域将自动更新。默认为false。
• cancel: 选定元素中可以取消选择的部分的选择器。默认为":input,option".
• classes: 自定义CSS类，以与选择操作相关联。默认值：{ "ui-selectable": "ui-widget-content", "ui-selected": "ui-state-highlight" }
• delay: 调整鼠标按下后开始选择的毫秒数。默认为0，从mousedown即开始选择。
• disabled: 禁用选择操作。默认为false。
• distance: 鼠标按下后拖动鼠标的像素数，以确定选择是否开始。默认为0，表示在mousedown时选择即开始。
• filter: 选定元素中应选择的一组元素的选择器。默认为"*"（所有元素）。
• tolerance: "fit"通过完全包含元素来选择，"intersect"通过与元素交叉来选择。默认为"intersect"。
• selected: 当选择区域创建时，为所有选定元素应用的CSS类。默认为"ui-selected"。
• selecting: 当选择区域正在创建时，为所有被选择但尚未完成的元素添加的CSS类。默认为"ui-selecting"。
• start: 当选择操作开始时，调用的回调函数。
• stop: 当选择操作停止时，调用的回调函数。

方法

.selectable("destroy")

销毁当前可选对象。

.selectable("disable")

禁用当前可选对象。

.selectable("enable")

启用当前可选对象。

.selectable("refresh")

重新刷新选择对象。如果需要，在更改DOM之后调用此方法。

事件

• selected: 当一个元素被选择时，发生此事件。
• selecting: 在选择一个元素时，发生此事件。
• start: 当选择操作开始时，发生此事件。
• stop: 当选择操作停止时，发生此事件。

使用示例

$( ".selector" ).selectable({
   filter: "li",
   selected: function( event, ui ) {
       alert('你选中了' + $(ui.selected).text());
   }
});

在这个示例中，选择操作只能在li元素上进行。当选择一个元素时，显示一个警告框。