UI/API/1.7/Selectable

概述
参数
事件
方法
主题

jQuery UI Selectable

jQuery UI Selectable 插件允许一个元素被鼠标划出的选择区域选中. 同样, 元素也可以被点击选中或者同时按住 Ctrl/Meta键, 允许多个(非连续)的选择.

其他附加文件

UI Core

示例

代码示范
查看源文件

一个简单的 jQuery UI Selectable.

$("#selectable").selectable();

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="ui/ui.core.js"></script>
  <script type="text/javascript" src="ui/ui.selectable.js"></script>
  <style type="text/css">
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#selectable").selectable();
  });
  </script>
</head>
<body style="font-size:62.5%;">

<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>
</body>
</html>

autoRefresh

类型:

Boolean

默认值:

true

这个确定每个选择操作开始时如何刷新(重新计算)每个选择项的位置和大小. 如果你有很多很多选项, 你应当设置此项为false并且手动调用refresh方法.
代码示例
使用指定的autoRefresh参数初始化一个selectable.
```
$('.selector').selectable({ autoRefresh: false });
```
在初始化后设置或者获取autoRefresh参数.
```
//获取
var autoRefresh = $('.selector').selectable('option', 'autoRefresh');
//设置
$('.selector').selectable('option', 'autoRefresh', false);
```
cancel

类型:

Selector

默认值:

':input,option'

如果你使用了匹配选择器,符合匹配的元素将被禁止可选.
代码示例
使用指定的cancel参数初始化一个selectable.
```
$('.selector').selectable({ cancel: ':input,option' });
```
在初始化后设置或者获取cancel参数.
```
//获取
var cancel = $('.selector').selectable('option', 'cancel');
//设置
$('.selector').selectable('option', 'cancel', ':input,option');
```
delay

类型:

Integer

默认值:

0

定义需要经过多少毫秒后选择才会开始. 这可以预防意外的点击造成元素被选择.
代码示例
使用指定的delay参数初始化一个selectable.
```
$('.selector').selectable({ delay: 20 });
```
在初始化后设置或者获取delay参数.
```
//获取
var delay = $('.selector').selectable('option', 'delay');
//设置
$('.selector').selectable('option', 'delay', 20);
```
distance

类型:

Integer

默认值:

0

定义需要移动多少个像素选择才会开始. 如果指定了该项, 选择不会马上开始,而是会在鼠标移动了指定像素的距离之后才会开始.
代码示例
使用指定的distance参数初始化一个selectable.
```
$('.selector').selectable({ distance: 20 });
```
在初始化后设置或者获取distance参数.
```
//获取
var distance = $('.selector').selectable('option', 'distance');
//设置
$('.selector').selectable('option', 'distance', 20);
```
filter

类型:

Selector

默认值:

'*'

匹配子元素中那些符合条件的元素才可以被选择.
代码示例
使用指定的filter参数初始化一个selectable.
```
$('.selector').selectable({ filter: 'li' });
```
在初始化后设置或者获取filter参数.
```
//获取
var filter = $('.selector').selectable('option', 'filter');
//设置
$('.selector').selectable('option', 'filter', 'li');
```
tolerance

类型:

String

默认值:

'touch'

指定选择的模式,允许使用的值: 'touch', 'fit'.
代码示例
使用指定的tolerance参数初始化一个selectable.
```
$('.selector').selectable({ tolerance: 'fit' });
```
在初始化后设置或者获取tolerance参数.
```
//获取
var tolerance = $('.selector').selectable('option', 'tolerance');
//设置
$('.selector').selectable('option', 'tolerance', 'fit');
```

selected

类型:

selected

这个事件会在任何可选的选项选择结束后触发.
代码示例
提供一个回调函数对selected事件进行操作.
```
$('.selector').selectable({
   selected: function(event, ui) { ... }
});
```
使用selected类型来绑定selected事件.
```
$('.selector').bind('selected', function(event, ui) {
  ...
});
```
selecting

类型:

selecting

这个事件会在任何可选的选项被选中时触发.
代码示例
提供一个回调函数对selecting事件进行操作.
```
$('.selector').selectable({
   selecting: function(event, ui) { ... }
});
```
使用selecting类型来绑定selecting事件.
```
$('.selector').bind('selecting', function(event, ui) {
  ...
});
```
start

类型:

selectablestart

这个事件在选择操作开始之前触发.
代码示例
提供一个回调函数对start事件进行操作.
```
$('.selector').selectable({
   start: function(event, ui) { ... }
});
```
使用selectablestart类型来绑定start事件.
```
$('.selector').bind('selectablestart', function(event, ui) {
  ...
});
```
stop

类型:

selectablestop

这个选项在选择操作停止时触发.
代码示例
提供一个回调函数对stop事件进行操作.
```
$('.selector').selectable({
   stop: function(event, ui) { ... }
});
```
使用selectablestop类型来绑定stop事件.
```
$('.selector').bind('selectablestop', function(event, ui) {
  ...
});
```
unselected

类型:

unselected

这个事件在任何被选中项取消选择结束后触发.
代码示例
提供一个回调函数对unselected事件进行操作.
```
$('.selector').selectable({
   unselected: function(event, ui) { ... }
});
```
使用unselected类型来绑定unselected事件.
```
$('.selector').bind('unselected', function(event, ui) {
  ...
});
```
unselecting

类型:

unselecting

这个事件在任何被选中项取消选择时触发.
代码示例
提供一个回调函数对unselecting事件进行操作.
```
$('.selector').selectable({
   unselecting: function(event, ui) { ... }
});
```
使用unselecting类型来绑定unselecting事件.
```
$('.selector').bind('unselecting', function(event, ui) {
  ...
});
```

destroy

方法签名:

.selectable( 'destroy' )

完全移除selectable功能. 这将使元素返回到之前的初始化状态.
disable

方法签名:

.selectable( 'disable' )

关闭selectable.
enable

方法签名:

.selectable( 'enable' )

打开 selectable.
option

方法签名:

.selectable( 'option', optionName, [value] )

获取或者设置selectable参数. 如果没有提供参数值则是获取.
refresh

方法签名:

.selectable( 'refresh' )

刷新每个选择项的位置和大小. 这个方法用来手动重新计算选择项的位置和大小,在autoRefresh设置为false时很有用.
toggle

方法签名:

.selectable( 'toggle' )

轮换selectable功能的状态. 这个方法可以启用或者禁用当前选择项的状态.

jQuery UI Selectable插件使用jQuery UI CSS 框架的外观和风格，包括颜色和背景纹理.我们建议您使用ThemeRoller工具来创建和下载的自定义主题，很容易建立和维护.

如果有更深层次的个性化需要，有特定类别的工具ui.selectable.css样式可供参考，可以修改这些参考。这些课程是下面以高亮和粗体显示的。

jQuery UI CSS Framework classes示例

Note: 注：这是一个示例selectable插件所产生的标记,而不是你应该使用的标记.创建一个selectable唯一需要的标记是
<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>.

部件

动画

UI/API/1.7/Selectable

jQuery UI Selectable

概述

其他附加文件

示例

参数

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

事件

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

方法

主题

jQuery UI CSS Framework classes示例