JQuery UI - selectable

  1. ·概述   
  2. Selectable插件允许用户对指定的元素进行选中的动作。此外还支持按住Ctrl键单击或拖拽选择多个元素。   
  3. 官方示例地址:http://jqueryui.com/demos/selectable/   
  4.   
  5.   
  6. ·参数(参数名 : 参数类型 : 默认值)   
  7. autoRefresh : Boolean : true  
  8.   决定是否在每次选择动作时,都重新计算每个选中元素的坐标和大小。如果你有很多个选择项的话,建议设置成false并通过方法手动刷新。   
  9.   初始:$('.selector').selectable({ autoRefresh: false });   
  10.   获取:var autoRefresh = $('.selector').selectable('option''autoRefresh');   
  11.   设置:$('.selector').selectable('option''autoRefresh'false);   
  12.   
  13. autoRefresh : Boolean : true  
  14.   决定是否在每次选择动作时,都重新计算每个选中元素的坐标和大小。如果你有很多个选择项的话,建议设置成false并通过方法手动刷新。   
  15.   初始:$('.selector').selectable({ autoRefresh: false });   
  16.   获取:var autoRefresh = $('.selector').selectable('option''autoRefresh');   
  17.   设置:$('.selector').selectable('option''autoRefresh'false);   
  18.   
  19. cancel : Selector : ':input,option'    
  20.   防止在与选择器相匹配的元素上发生选择动作。   
  21.   初始:$('.selector').selectable({ cancel: ':input,option' });   
  22.   获取:var cancel = $('.selector').selectable('option''cancel');   
  23.   设置:$('.selector').selectable('option''cancel'':input,option');   
  24.   
  25. delay : Integer : 0   
  26.   以毫秒为单位,设置延迟多久才激活选择动作。此参数可防止误点击。   
  27.   初始:$('.selector').selectable({ delay: 20 });   
  28.   获取:var delay = $('.selector').selectable('option''delay');   
  29.   设置:$('.selector').selectable('option''delay', 20);   
  30.   
  31. distance : Integer : 0   
  32.   决定至少要在元素上面拖动多少像素后,才正式触发选中的动作。   
  33.   初始:$('.selector').selectable({ distance: 20 });   
  34.   获取:var distance = $('.selector').selectable('option''distance');   
  35.   设置:$('.selector').selectable('option''distance', 20);   
  36.   
  37. filter : Selector : '*'  
  38.   设置哪些子元素才可以被选中。   
  39.   初始:$('.selector').selectable({ filter: 'li' });   
  40.   获取:var filter = $('.selector').selectable('option''filter');   
  41.   设置:$('.selector').selectable('option''filter''li');   
  42.   
  43. tolerance : String : 'touch'    
  44.   可选值:'touch''fit',分别代表完全和部署覆盖元素即触发选中动作。   
  45.   初始:$('.selector').selectable({ tolerance: 'fit' });   
  46.   获取:var tolerance = $('.selector').selectable('option''tolerance');   
  47.   设置:$('.selector').selectable('option''tolerance''fit');   
  48.   
  49.   
  50. ·事件   
  51. selected   
  52.   当选中某一个元素后触发此事件。   
  53.   初始:$('.selector').selectable({ selected: function(event, ui) { ... } });   
  54.   绑定:$('.selector').bind('selected'function(event, ui) { ... });   
  55.   
  56. selecting   
  57.   当选中某一个元素时触发此事件。   
  58.   初始:$('.selector').selectable({ selecting: function(event, ui) { ... } });   
  59.   绑定:$('.selector').bind('selecting'function(event, ui) { ... });   
  60.   
  61. start   
  62.   当开始准备要选中一个元素时触发此事件。   
  63.   初始:$('.selector').selectable({ start: function(event, ui) { ... } });   
  64.   绑定:$('.selector').bind('selectablestart'function(event, ui) { ... });   
  65.   
  66. stop   
  67.   当已经结束选中一个元素时触发此事件。   
  68.   初始:$('.selector').selectable({ stop: function(event, ui) { ... } });   
  69.   绑定:$('.selector').bind('selectablestop'function(event, ui) { ... });   
  70.   
  71. unselected   
  72.   当取消选中某一个元素后触发此事件。   
  73.   初始:$('.selector').selectable({ unselected: function(event, ui) { ... } });   
  74.   绑定:$('.selector').bind('unselected'function(event, ui) { ... });   
  75.   
  76. unselecting   
  77.   当取消选中某一个元素后触发此事件。   
  78.   初始:$('.selector').selectable({ unselecting: function(event, ui) { ... } });   
  79.   绑定:$('.selector').bind('unselecting'function(event, ui) { ... });   
  80.   
  81.   
  82. ·方法   
  83. destory   
  84.   从元素中移除拖拽功能。   
  85.   用法:.droppable( 'destroy' )   
  86.   
  87. disable   
  88.   禁用元素的拖拽功能。   
  89.   用法:.droppable( 'disable' )   
  90.   
  91. enable   
  92.   启用元素的拖拽功能。   
  93.   用法:.droppable( 'enable' )   
  94.   
  95. option   
  96.   获取或设置元素的参数。   
  97.   用法:.droppable( 'option' , optionName , [value] )   
  98.   
  99. refresh   
  100.   用于手动刷新、重新计算每个选中元素的位置和大小。当autoRefresh设置成false,此方法对于刷新大量选中项非常有用。   
  101.   用法:.selectable( 'refresh' ) 

posted on 2011-04-28 09:18  Joey_zy0210  阅读(5561)  评论(0编辑  收藏  举报

导航