可选(Selectable)
jQueryUI提供了selectable()方法来单独或在组中选择DOM元素。 使用此方法,可以通过使用鼠标在元素上拖动框(有时称为套索)来选择元素。 此外,可以通过在按住Ctrl/Meta键的同时单击或拖动来选择元素,从而允许多个(非连续)选择。
语法 (Syntax)
selectable()方法可以使用两种形式 -
$(selector, context).selectable (options)方法
$(selector, context).selectable ("action", params)方法
$ (selector, context).selectable(options)方法
selectable (options)方法声明HTML元素包含可selectable (options) 。 options参数是一个对象,它指定选择时涉及的元素的行为。
语法 (Syntax)
$(selector, context).selectable (options);
您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -
$(selector, context).selectable({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同options -
Sr.No. | 选项和说明 |
---|---|
1 | appendTo 此选项告诉应该将选择助手(套索)附加到哪个元素。 默认情况下,其值为body 。 Option - appendTo 此选项告诉应该将选择助手(套索)附加到哪个元素。 默认情况下,其值为body 。 Syntax
|
2 | autoRefresh 此选项如果设置为true ,则在选择操作开始时计算每个可选项的位置和大小。 默认情况下,其值为true 。 Option - autoRefresh 此选项如果设置为true ,则在选择操作开始时计算每个可选项的位置和大小。 默认情况下,其值为true 。 如果您有许多项目,则可能需要将其设置为false并手动调用refresh()方法。 Syntax
|
3 | cancel 此选项禁止选择是否开始选择元素。 默认情况下,其值为input,textarea,button,select,option 。 Option - cancel 此选项禁止选择是否开始选择元素。 默认情况下,其值为input,textarea,button,select,option 。 Syntax
|
4 | delay 此选项用于设置以毫秒为单位的时间,并定义何时开始选择。 这可用于防止不必要的选择。 默认情况下,其值为0 。 Option - delay 此选项用于设置以毫秒为单位的时间,并定义何时开始选择。 这可用于防止不必要的选择。 默认情况下,其值为0 。 Syntax
|
5 | disabled 此选项设置为true时,禁用选择机制。 在使用可选择(“enable”)指令恢复机制之前,用户无法选择元素。 默认情况下,其值为false 。 Option - disabled 此选项设置为true时,禁用选择机制。 在使用可选择(“enable”)指令恢复机制之前,用户无法选择元素。 默认情况下,其值为false 。 Syntax
|
6 | distance 此选项是鼠标必须移动以考虑正在进行的选择的距离(以像素为单位)。 例如,这有助于防止简单点击被解释为组选择。 默认情况下,其值为0 。 Option - distance 此选项是鼠标必须移动以考虑正在进行的选择的距离(以像素为单位)。 例如,这有助于防止简单点击被解释为组选择。 默认情况下,其值为0 。 Syntax
|
7 | filter 此选项是一个选择器,指示哪些元素可以作为选择的一部分。 默认情况下,其值为* 。 Option - filter 此选项是一个选择器,指示哪些元素可以作为选择的一部分。 默认情况下,其值为* 。 Syntax
|
8 | tolerance 此选项指定用于测试选择助手(套索)是否应选择项目的模式。 默认情况下,其值为touch 。 Option - tolerance 此选项指定用于测试选择助手(套索)是否应选择项目的模式。 默认情况下,其值为touch 。 这可以是 -
Syntax
|
以下部分将向您展示一些可选功能的工作示例。
默认功能
以下示例演示了可选功能的简单示例,不向selectable()方法传递任何参数。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI selectable-1</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#selectable-1 .ui-selecting { background: #707070 ; }
#selectable-1 .ui-selected { background: #EEEEEE; 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: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#selectable-1" ).selectable();
});
</script>
</head>
<body>
<ol id = "selectable-1">
<li class = "ui-widget-content">Product 1</li>
<li class = "ui-widget-content">Product 2</li>
<li class = "ui-widget-content">Product 3</li>
<li class = "ui-widget-content">Product 4</li>
<li class = "ui-widget-content">Product 5</li>
<li class = "ui-widget-content">Product 6</li>
<li class = "ui-widget-content">Product 7</li>
</ol>
</body>
</html>
让我们将上述代码保存在HTML文件selectableexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。
尝试单击产品,使用CTRLS键选择多个产品。
使用延迟和距离
以下示例演示了JqueryUI的可选功能中两个选项delay和distance的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Selectable</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://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">Product 1</li>
<li class = "ui-widget-content">Product 2</li>
<li class = "ui-widget-content">Product 3</li>
</ol>
<h3>Starts after mouse moves distance of 100px</h3>
<ol id = "selectable-3">
<li class = "ui-widget-content">Product 4</li>
<li class = "ui-widget-content">Product 5</li>
<li class = "ui-widget-content">Product 6</li>
<li class = "ui-widget-content">Product 7</li>
</ol>
</body>
</html>
让我们将上述代码保存在HTML文件selectableexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。
尝试单击产品,使用CTRL键选择多个产品。 您会注意到产品1,产品2和产品3的选择在延迟1000ms后开始。 产品4,产品5,产品6和产品7的选择不能单独进行。 只有在鼠标移动100px的距离后才会开始选择。
使用过滤器
以下示例演示了JqueryUI的可选功能中两个选项delay和distance的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI selectable-4</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#selectable-4 .ui-selecting { background: #707070 ; }
#selectable-4 .ui-selected { background: #EEEEEE; color: #000000; }
#selectable-4 { list-style-type: none; margin: 0;
padding: 0; width: 20%; }
#selectable-4 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-4" ).selectable({
filter : "li:first-child"
});
});
</script>
</head>
<body>
<ol id = "selectable-4">
<li class = "ui-widget-content">Product 1</li>
<li class = "ui-widget-content">Product 2</li>
<li class = "ui-widget-content">Product 3</li>
<li class = "ui-widget-content">Product 4</li>
<li class = "ui-widget-content">Product 5</li>
<li class = "ui-widget-content">Product 6</li>
<li class = "ui-widget-content">Product 7</li>
</ol>
</body>
</html>
让我们将上述代码保存在HTML文件selectableexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。
尝试点击产品。 您会注意到只能选择第一个产品。
$ (selector, context).selectable(“action”,params)方法
selectable ("action", params)方法可以对可选元素执行动作,例如防止可选功能。 该操作在第一个参数中指定为字符串(例如,“禁用”以停止选择)。 请查看下表中可以传递的操作。
语法 (Syntax)
$(selector, context).selectable ("action", params);;
下表列出了此方法可以使用的不同actions -
Sr.No. | 行动和描述 |
---|---|
1 | destroy 此操作完全删除元素的可选功能。 元素返回到pre-init状态。 Action - destroy 此操作完全删除元素的可选功能。 元素返回到pre-init状态。 Syntax
|
2 | disable 此操作将停用元素的可选功能。 此方法不接受任何参数。 Action - disable 此操作完全删除元素的可选功能。 元素返回到pre-init状态。 Syntax
|
3 | enable 此操作启用元素的可选功能。 此方法不接受任何参数。 Action - enable 此操作启用元素的可选功能。 此方法不接受任何参数。 Syntax
|
4 | option( optionName ) 此操作获取当前与指定的optionName关联的值。 Action - option( optionName ) 此操作获取当前与指定的optionName关联的值。 Syntax
|
5 | option() 此操作获取一个对象,其中包含表示当前可选选项哈希的键/值对。 Action - option() 此操作获取一个对象,其中包含表示当前可选选项哈希的键/值对。 Syntax
|
6 | option( optionName, value ) 此操作设置与指定的optionName关联的可选选项的值。 参数optionName是要设置的选项的名称, value是要为该选项设置的值。 Action - option( optionName, value ) 此操作设置与指定的optionName关联的可选选项的值。 参数optionName是要设置的选项的名称, value是要为该选项设置的值。 Syntax
|
7 | option( options ) 此操作为可选项设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。 Action - option( options ) 此操作为可选项设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。 Syntax
|
8 | refresh 此操作会导致刷新可选元素的大小和位置。 主要用于禁用autoRefresh选项(设置为false )。 此方法不接受任何参数。 Action - refresh 此操作会导致刷新可选元素的大小和位置。 主要在禁用autoRefresh选项时使用。 此方法不接受任何参数。 Syntax
|
9 | widget 此操作返回包含可选元素的jQuery对象。 此方法不接受任何参数。 Action - widget 此操作返回包含可选元素的jQuery对象。 此方法不接受任何参数。 Syntax
|
例子 (Example)
现在让我们看一个使用上表中的操作的示例。 以下示例演示了disable()和option( optionName, value )方法的option( optionName, value ) 。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Selectable</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#selectable-5 .ui-selecting,#selectable-6 .ui-selecting {
background: #707070 ; }
#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: #cedc98;
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">Product 1</li>
<li class = "ui-widget-content">Product 2</li>
<li class = "ui-widget-content">Product 3</li>
</ol>
<h3>Select using method option( optionName, value )</h3>
<ol id = "selectable-6">
<li class = "ui-widget-content">Product 4</li>
<li class = "ui-widget-content">Product 5</li>
<li class = "ui-widget-content">Product 6</li>
<li class = "ui-widget-content">Product 7</li>
</ol>
</body>
</html>
让我们将上面的代码保存在HTML文件selectableexample.htm ,并在支持javascript的标准浏览器中打开它
尝试单击产品,使用CTRL键选择多个产品。 您会注意到禁用了产品1,产品2和产品3。 产品4,产品5,产品6和产品7的选择发生在鼠标移动距离为1px之后。
可选元素的事件管理
除了我们在前面部分中看到的selectable(options)方法之外,JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -
Sr.No. | 事件方法和描述 |
---|---|
1 | create(event, ui) 创建可选元素时会触发此事件。 其中event是Event类型, ui是Object类型。 Event - create(event, ui) 创建可选元素时会触发此事件。 其中event是Event类型, ui是Object类型。 Syntax
|
2 | selected(event, ui) 为每个被选中的元素触发此事件。 其中event是Event类型, ui是Object类型。 Event - selected(event, ui) 为每个被选中的元素触发此事件。 其中event是Event类型, ui是Object类型。 ui可能值是 -
Syntax
|
3 | selecting(event, ui) 将为即将被选中的每个可选元素触发此事件。 其中event是Event类型, ui是Object类型。 Event - selecting(event, ui) 将为即将被选中的每个可选元素触发此事件。 其中event是Event类型, ui是Object类型。 ui可能值是 -
Syntax
|
4 | start(event, ui) 此事件在选择操作开始时触发。 其中event是Event类型, ui是Object类型。 Event - start(event, ui) 此事件在选择操作开始时触发。 其中event是Event类型, ui是Object类型。 Syntax
|
5 | stop(event, ui) 此事件在选择操作结束时触发。 其中event是Event类型, ui是Object类型。 Event - stop(event, ui) 此事件在选择操作结束时触发。 其中event是Event类型, ui是Object类型。 Syntax
|
6 | unselected(event, ui) 对于未选中的每个元素,在选择操作结束时触发此事件。 其中event是Event类型, ui是Object类型。 Event - unselected(event, ui) 对于未选中的每个元素,在选择操作结束时触发此事件。 其中event是Event类型, ui是Object类型。 ui可能值是 -
Syntax
|
7 | unselecting(event, ui) 在选择操作期间,将针对即将取消选择的每个所选元素触发此事件。 其中event是Event类型, ui是Object类型。 Event - unselecting(event, ui) 在选择操作期间,将针对即将取消选择的每个所选元素触发此事件。 其中event是Event类型, ui是Object类型。 ui可能值是 -
Syntax
|
例子 (Example)
以下示例演示了可选功能期间的事件方法用法。 此示例演示了selected事件的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI selectable-7</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#selectable-7 .ui-selecting { background: #707070 ; }
#selectable-7 .ui-selected { background: #EEEEEE; 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: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
.resultarea {
background: #cedc98;
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">Product 1</li>
<li class = "ui-widget-content">Product 2</li>
<li class = "ui-widget-content">Product 3</li>
<li class = "ui-widget-content">Product 4</li>
<li class = "ui-widget-content">Product 5</li>
<li class = "ui-widget-content">Product 6</li>
<li class = "ui-widget-content">Product 7</li>
</ol>
<span class = "resultarea">Selected Product</span>>
<span id = result class = "resultarea"></span>
</body>
</html>
让我们将上面的代码保存在HTML文件selectableexample.htm ,并在支持javascript的标准浏览器中打开它
尝试单击产品,使用CTRL键选择多个产品。 您会注意到所选的产品编号打印在底部。