JQuery UI - selectable
·概述 Selectable插件允许用户对指定的元素进行选中的动作。此外还支持按住Ctrl键单击或拖拽选择多个元素。 官方示例地址：http://jqueryui.com/demos/selectable/ ·参数（参数名 : 参数类型 : 默认值） autoRefresh : Boolean : true 决定是否在每次选择动作时，都重新计算每个选中元素的坐标和大小。如果你有很多个选择项的话，建议设置成false并通过方法手动刷新。 初始：$('.selector').selectable({ autoRefresh: false }); 获取：var autoRefresh = $('.selector').selectable('option', 'autoRefresh'); 设置：$('.selector').selectable('option', 'autoRefresh', false); autoRefresh : Boolean : true 决定是否在每次选择动作时，都重新计算每个选中元素的坐标和大小。如果你有很多个选择项的话，建议设置成false并通过方法手动刷新。 初始：$('.selector').selectable({ autoRefresh: false }); 获取：var autoRefresh = $('.selector').selectable('option', 'autoRefresh'); 设置：$('.selector').selectable('option', 'autoRefresh', false); cancel : Selector : ':input,option' 防止在与选择器相匹配的元素上发生选择动作。 初始：$('.selector').selectable({ cancel: ':input,option' }); 获取：var cancel = $('.selector').selectable('option', 'cancel'); 设置：$('.selector').selectable('option', 'cancel', ':input,option'); delay : Integer : 0 以毫秒为单位，设置延迟多久才激活选择动作。此参数可防止误点击。 初始：$('.selector').selectable({ delay: 20 }); 获取：var delay = $('.selector').selectable('option', 'delay'); 设置：$('.selector').selectable('option', 'delay', 20); distance : Integer : 0 决定至少要在元素上面拖动多少像素后，才正式触发选中的动作。 初始：$('.selector').selectable({ distance: 20 }); 获取：var distance = $('.selector').selectable('option', 'distance'); 设置：$('.selector').selectable('option', 'distance', 20); filter : Selector : '*' 设置哪些子元素才可以被选中。 初始：$('.selector').selectable({ filter: 'li' }); 获取：var filter = $('.selector').selectable('option', 'filter'); 设置：$('.selector').selectable('option', 'filter', 'li'); tolerance : String : 'touch' 可选值：'touch', 'fit'，分别代表完全和部署覆盖元素即触发选中动作。 初始：$('.selector').selectable({ tolerance: 'fit' }); 获取：var tolerance = $('.selector').selectable('option', 'tolerance'); 设置：$('.selector').selectable('option', 'tolerance', 'fit'); ·事件 selected 当选中某一个元素后触发此事件。 初始：$('.selector').selectable({ selected: function(event, ui) { ... } }); 绑定：$('.selector').bind('selected', function(event, ui) { ... }); selecting 当选中某一个元素时触发此事件。 初始：$('.selector').selectable({ selecting: function(event, ui) { ... } }); 绑定：$('.selector').bind('selecting', function(event, ui) { ... }); start 当开始准备要选中一个元素时触发此事件。 初始：$('.selector').selectable({ start: function(event, ui) { ... } }); 绑定：$('.selector').bind('selectablestart', function(event, ui) { ... }); stop 当已经结束选中一个元素时触发此事件。 初始：$('.selector').selectable({ stop: function(event, ui) { ... } }); 绑定：$('.selector').bind('selectablestop', function(event, ui) { ... }); unselected 当取消选中某一个元素后触发此事件。 初始：$('.selector').selectable({ unselected: function(event, ui) { ... } }); 绑定：$('.selector').bind('unselected', function(event, ui) { ... }); unselecting 当取消选中某一个元素后触发此事件。 初始：$('.selector').selectable({ unselecting: function(event, ui) { ... } }); 绑定：$('.selector').bind('unselecting', function(event, ui) { ... }); ·方法 destory 从元素中移除拖拽功能。 用法：.droppable( 'destroy' ) disable 禁用元素的拖拽功能。 用法：.droppable( 'disable' ) enable 启用元素的拖拽功能。 用法：.droppable( 'enable' ) option 获取或设置元素的参数。 用法：.droppable( 'option' , optionName , [value] ) refresh 用于手动刷新、重新计算每个选中元素的位置和大小。当autoRefresh设置成false，此方法对于刷新大量选中项非常有用。 用法：.selectable( 'refresh' )