jQuery UI Chinese Reference Manual /选择(Selectable)

选择(Selectable)

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

如需了解更多有关 selectable 交互的细节,请查看 API 文档 可选择小部件(Selectable Widget)。

默认功能

在某个 DOM 元素上或者一组元素上启用 selectable 功能。通过鼠标拖拽选择条目。按住 Ctrl 键,选择多个不相邻的条目。

实例

    jQuery UI 选择(Selectable) - 默认功能       
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6
  7. Item 7

运行实例 »

点击 "运行实例" 按钮查看在线实例

显示为网格

让 selectable 条目显示为网格,使用 CSS 使得它们带有相同的尺寸且浮动显示。

实例

    jQuery UI 选择(Selectable) - 显示为网格       
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12

运行实例 »

点击 "运行实例" 按钮查看在线实例

序列化

写一个函数,在stop事件发生时触发,来收集被选中条目的索引值。呈现这些值作为反馈,或者以数据字符串形式进行传递。

实例

    jQuery UI 选择(Selectable) - 序列化       

您已经选择了:

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6

运行实例 »

点击 "运行实例" 按钮查看在线实例