jQuery UI Selectable
jQuery UI selectable()方法用于单独或成组选择DOM元素。使用此方法，可以通过用鼠标在元素上拖动一个框来选择元素。您也可以使用ctrl按钮选择多个元素。
语法:
您可以以两种形式使用selectable()方法:
$(selector, context).selectable (options) 方法
$(selector, context).selectable ("action", params) 方法
第一个方法
selectable(options)方法指定HTML元素包含可选项。这里的选项？参数是一个对象，它指定选择时涉及的元素的行为。
使用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。 |
jQuery UI selectable()示例1
让我们看一个简单的示例，以演示没有参数传递给selectable()方法的selectable功能。
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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
延迟和距离的使用:
以下示例演示了延迟和距离这两个选项。
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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>
<ol id="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)
selectable ("action", params)方法用于对可选元素执行操作，例如阻止可选功能。在这里，"action"在第一个参数中指定为字符串(例如，"disable"以停止选择)。
以下是可与此方法一起使用的不同操作的列表:
| 动作 |
说明 |
| destroy |
此操作将完全destroy元素的功能。元素返回其初始状态。 |
| disable |
此操作用于禁用元素的可选功能。此方法不接受任何参数。 |
| enable |
此操作启用元素的可选功能。此方法不接受任何参数。 |
| option(optionName，value) |
此操作获取当前与指定的optionName关联的值。 |
| option() |
此操作将获取一个对象，该对象包含表示当前可选选项哈希的键/值对。 |
| option(optionName，value) |
此操作设置与指定的optionName关联的可选选项的值。参数optionName是要设置的选项的名称，value是要为该选项设置的值。 |
| option(options) |
此操作为可选项设置一个或多个选项。 options参数是要设置的选项-值对的映射。 |
| refresh |
此操作将导致刷新可选元素的大小和位置。通常在禁用autoRefresh选项(设置为false)时使用。此方法不接受任何参数。 |
| widget |
此操作返回一个包含selectable元素的jQuery对象。此方法不接受任何参数。 |
jQuery UI selectable()示例3
让我们以一个示例来演示上表中操作的使用。在下面的示例中，我们演示了
disable()和
option(optionName，value)方法的使用。
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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>
<ol id="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
以下示例指定如何使用具有可选功能的事件方法。在此示例中，我们演示具有可选功能的事件
"selected" 。
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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>
