04 Jquery UI Selectable 选择插件

Posted 2021-01-02 工作在浏览器上人-YangBobin

使用鼠标选择单个元素或一组元素。

一、实例

一个简单的 jQuery UI 可选择小部件（Selectable Widget）。

代码

  <style>
  #selectable .ui-selecting {
    background: #ccc;
  }
  #selectable .ui-selected {
    background: #999;
  }
  </style>
 
<ul id="selectable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
 
<script>
$( "#selectable" ).selectable();
</script>

  

查看演示

注释：jQuery UI 可选择（Selectable）插件允许通过鼠标拖拽选择元素（有时被称为一个套索）。可以在按住 ctrl/meta 键的同时单击或拖动来选择多个（不连续的）元素。

二、快速导航

1、选项

• appendTo：选择助手（套索）要被添加到哪一个元素。
• autoRefresh：该选项决定是否在每个选择操作的开始时更新（重新计算）每个选择项的位置和尺寸。如果您有多个项目，您可能要设置该选项为 false，并手动调用 refresh() 方法。
• cancel：防止从匹配选择器的元素上开始选择。
• delay：鼠标按下后直到选择开始的时间，以毫秒计。该选项可以防止点击在某个元素上时不必要的选择。
• disabled：如果设置为 true，则禁用该 selectable。
• distance：鼠标按下后选择开始前必须移动的距离，以像素计。如果指定了该选项，选择只有在鼠标拖拽超出指定距离时才会开始。该选项可以防止点击在某个元素上时不必要的选择。
• filter：要制作选择项（可被选择的）的匹配的子元素。
• tolerance：指定用于测试套索是否选择一个项目的模式。可能的值：
• "fit"：套索完全重叠在项目上。
• "touch"：套索重叠在项目上，任何比例皆可。

2、方法

• destroy()：完全移除 selectable 功能。这会把元素返回到它的预初始化状态。
• disable()：禁用 selectable。
• enable()：启用 selectable。
• option()：获取当前与指定的 optionName 关联的值。
• refresh()：更新每个选择项元素的位置和尺寸。当 autoRefresh 选项被设置为 false 时，该方法可用于手动重新计算每个选择项的位置和尺寸。
• widget()：返回一个包含 selectable 元素的 jQuery 对象。

3、事件

• create( event, ui )：当 selectable 被创建时触发。
• selected( event, ui )：当每个元素被添加选择时，在选择操作结尾触发。
• selecting( event, ui )：当每个元素被添加选择时，在选择操作期间触发。
• start( event, ui )：在选择操作开头触发。
• stop( event, ui )：在选择操作结尾触发。
• unselected( event, ui )：当每个元素从选择中被移除时，在选择操作结尾触发。
• unselecting( event, ui )：当每个元素从选择中被移除时，在选择操作期间触发。