本文概述
- 第一种方法
- jQuery UI selectable()示例1
- jQuery UI selectable()示例2
- 第二种方法
- jQuery UI selectable()示例3
- jQuery UI selectable()示例4
句法：
你可以通过两种形式使用selectable()方法：
$(selector, context).selectable (options) Method$(selector, context).selectable ("action", params) Method第一种方法selectable（选项）方法指定HTML元素包含可选项目。这里的选项？参数是一个对象, 它指定选择时涉及的元素的行为。
【jQuery UI可选】你可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项, 则必须使用逗号将它们分开, 如下所示：
$(selector, context).selectable({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表：
| 选项 | 描述 |
|---|---|
| appendTo | 此选项指定选择助手（套索）应附加到哪个元素。默认情况下, 其值为body。 |
| autoRefresh | 如果将此选项设置为true, 则在选择操作开始时将计算每个可选项目的位置和大小。默认情况下, 其值为true。 |
| cancel | 如果开始选择元素, 则此选项禁止选择。默认情况下, 其值为输入, textArea, 按钮, 选择, 选项。 |
| delay | 此选项定义选择开始的时间。它以毫秒为单位设置时间。这可以用来防止不必要的选择。默认情况下, 其值为0。 |
| disabled | 如果将此选项设置为true, 它将禁用选择机制。在机制设置为启用之前, 你无法选择元素。能”）, 默认情况下, 其值为false。 |
| distance | 此选项是鼠标必须移动以考虑正在进行的选择的距离（以像素为单位）。例如, 这有助于防止将简单的点击解释为组选择。默认情况下, 其值为0。 |
| filter | 此选项是一个选择器, 指示哪些元素可以成为选择的一部分。默认情况下, 其值为*。 |
| tolerance | 此选项指定用于测试选择助手（套索）是否应选择项目的模式。默认情况下, 其值为touch。 |
<
!doctype html>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
jQuery UI selectable-1<
/title>
<
link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<
script src="http://img.readke.com/220430/01340V403-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/01340R033-1.jpg">
<
/script>
<
style>
#selectable-1 .ui-selecting { background: #cdc8b1 ;
}
#selectable-1 .ui-selected { background: #006400;
color: #000000;
}
#selectable-1 { list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
}
#selectable-1 li { margin: 3px;
padding: 0.4em;
font-size: 16px;
height: 18px;
}
.ui-widget-content {
background: #00ced1;
border: 1px solid #DDDDDD;
color: #8b0a50;
}
<
/style>
<
script>
$(function() {
$( "#selectable-1" ).selectable();
});
<
/script>
<
/head>
<
body>
<
ol id="selectable-1">
<
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>
立即测试
jQuery UI selectable()示例2使用延迟和距离：
下面的示例演示了两个选项delay和distance的使用。
<
!doctype html>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
jQuery UI Selectable<
/title>
<
link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<
script src="http://img.readke.com/220430/01340V403-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/01340R033-1.jpg">
<
/script>
<
style>
#selectable-2 .ui-selecting, #selectable-3 .ui-selecting {
background: #707070 ;
}
#selectable-2 .ui-selected, #selectable-3 .ui-selected {
background: #EEEEEE;
color: #000000;
}
#selectable-2, #selectable-3 { list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
}
#selectable-2 li, #selectable-3 li { margin: 3px;
padding: 0.4em;
font-size: 16px;
height: 18px;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
<
/style>
<
script>
$(function() {
$( "#selectable-2" ).selectable({
delay : 1000
});
$( "#selectable-3" ).selectable({
distance : 100
});
});
<
/script>
<
/head>
<
body>
<
h3>
Starts after delay of 1000ms<
/h3>
<
ol id="selectable-2">
<
li class="ui-widget-content">
Item 1<
/li>
<
li class="ui-widget-content">
Item 2<
/li>
<
li class="ui-widget-content">
Item 3<
/li>
<
/ol>
<
h3>
Starts after mouse moves distance of 100px<
/h3>
<
olid="selectable-3">
<
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>
立即测试
第二种方法
$(selector, context).selectable ("action", params)可选（“操作”, 参数）方法用于对可选元素执行操作, 例如阻止可选功能。在此, “操作”在第一个参数中指定为字符串（例如, “禁用”以停止选择）。
以下是可与该方法一起使用的不同操作的列表：
| 行动 | 描述 |
|---|---|
| destroy | 此操作会完全破坏元素的功能。元素返回其预初始化状态。 |
| disable | 此操作用于禁用元素的可选功能。此方法不接受任何参数。 |
| enable | 此操作启用元素的可选功能。此方法不接受任何参数。 |
| option( optionName, value ) | 此操作获取当前与指定的optionName关联的值。 |
| option() | 该操作获取一个对象, 该对象包含表示当前可选选项哈希的键/值对。 |
| option( optionName, value ) | 此操作设置与指定的optionName关联的可选选项的值。参数optionName是要设置的选项的名称, value是要为该选项设置的值。 |
| option( options ) | 此操作为可选设置一个或多个选项。参数options是要设置的选项-值对的映射。 |
| refresh | 此操作将导致刷新可选元素的大小和位置。通常在禁用autoRefresh选项（设置为false）时使用。此方法不接受任何参数。 |
| widget | 该操作返回一个包含selectable元素的jQuery对象。此方法不接受任何参数。 |
<
!doctype html>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
jQuery UI Selectable<
/title>
<
link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<
script src="http://img.readke.com/220430/01340V403-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/01340R033-1.jpg">
<
/script>
<
style>
#selectable-5 .ui-selecting, #selectable-6 .ui-selecting {
background: #00bfff;
}
#selectable-5 .ui-selected, #selectable-6 .ui-selected {
background: #EEEEEE;
color: #000000;
}
#selectable-5, #selectable-6 {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
}
#selectable-5 li, #selectable-6 li {
margin: 3px;
padding: 0.4em;
font-size: 16px;
height: 18px;
}
.ui-widget-content {
background:#b4eeb4;
border: 1px solid #DDDDDD;
color: #333333;
}
<
/style>
<
script>
$(function() {
$( "#selectable-5" ).selectable();
$( "#selectable-5" ).selectable('disable');
$( "#selectable-6" ).selectable();
$( "#selectable-6" ).selectable( "option", "distance", 1 );
});
<
/script>
<
/head>
<
body>
<
h3>
Disabled using disable() method<
/h3>
<
ol id="selectable-5">
<
li class="ui-widget-content">
Item 1<
/li>
<
li class="ui-widget-content">
Item 2<
/li>
<
li class="ui-widget-content">
Item 3<
/li>
<
/ol>
<
h3>
Select using method option( optionName, value )<
/h3>
<
olid="selectable-6">
<
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>
立即测试
jQuery UI selectable()示例4以下示例指定如何使用具有可选功能的事件方法。在此示例中, 我们演示了具有可选功能的“已选择”事件。
<
!doctype html>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
jQuery UI selectable-7<
/title>
<
link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<
script src="http://img.readke.com/220430/01340V403-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/01340R033-1.jpg">
<
/script>
<
style>
#selectable-7 .ui-selecting { background: #707070 ;
}
#selectable-7 .ui-selected { background: #006400;
color: #000000;
}
#selectable-7 { list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
}
#selectable-7 li { margin: 3px;
padding: 0.4em;
font-size: 16px;
height: 18px;
}
.ui-widget-content {
background: #00ffff;
border: 1px solid #DDDDDD;
color: #333333;
}
.resultarea {
background: red;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #333333;
font-size:14px;
}
<
/style>
<
script>
$(function() {
$( "#selectable-7" ).selectable({
selected: function() {
var result = $( "#result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable-7 li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
<
/script>
<
/head>
<
body>
<
h3>
Events<
/h3>
<
ol id="selectable-7">
<
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>
<
span class="resultarea">
Selected Items<
/span>
>
<
span id=result class="resultarea">
<
/span>
<
/body>
<
/html>
立即测试
推荐阅读
- jQuery UI选择菜单
- jQuery UI可调整大小
- jQuery UI removeClass
- jQuery UI进度栏
- jQuery UI菜单
- jQuery UI简介
- jQuery UI隐藏
- jQuery UI功能
- jQuery UI效果