jQuery UI可选 jQueryUI可选|jQueryUI

本文概述

第一种方法
jQuery UI selectable()示例1
jQuery UI selectable()示例2
第二种方法
jQuery UI selectable()示例3
jQuery UI selectable()示例4

jQuery UI selectable()方法用于单独或成组选择DOM元素。使用此方法, 可以通过用鼠标在元素上拖动一个框来选择元素。你也可以使用ctrl按钮选择多个元素。
句法：
你可以通过两种形式使用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。

jQuery UI selectable()示例1让我们以一个简单的示例来演示不向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://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对象。此方法不接受任何参数。

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://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>

立即测试