JqueryUI - 可选

JqueryUI Selectable - 从简单和简单的步骤学习JqueryUI，从基本到高级概念，包括概述，环境设置，交互，可拖动，可放置，可调整大小，可选，可排序，小部件，手风琴，自动完成，按钮，Datepicker，对话框，菜单， Progressbar，Slider，Spinner，Tabs，Tooltip，Effects，Add Class，Color Animation，Effect，Hide，Remove Class，Show，Switch Class，Toggle，Toggle Class，Utilities，Position，Widget Factory

jQueryUI提供了selectable()方法来单独或在组中选择DOM元素.使用此方法，可以通过使用鼠标在元素上拖动框(有时称为套索)来选择元素.此外，可以通过在按住Ctrl/Meta键的同时单击或拖动来选择元素，从而允许多个(非连续)选择.

语法

selectable()方法可以两种形式使用 :

$(selector, context).selectable (options) 方法
$(selector, context).selectable ("action", params) 方法

$ (selector, context).selectable (options) 方法

selectable(options)方法声明HTML元素包含可选项. options 参数是一个对象，它指定选择时涉及的元素的行为.

语法

$(selector, context).selectable (options);

您可以使用Javascript对象一次提供一个或多个选项.如果要提供多个选项，那么您将使用逗号分隔它们，如下所示;

$(selector, context).selectable({option1: value1, option2: value2..... });

下表列出了可与此方法一起使用的不同选项 :


$(".selector").selectlect({appendTo:"＃identifier"});
$(".selector").select({autoRefresh:false});
$(".selector").selectlect({cancel:"a .cancel"});
$(".selector").selectlect({delay:150});
$(".selector").selectlect({disabled:true});
$(".selector").select({distance:30});
$(".selector").selectlect({filter:"li"});
$(".selector").selectlect({tolerance:"fit"});

Sr.No.	选项&描述
1	appendTo 此选项告诉选择助手(套索)应追加哪个元素.默认情况下，其值为正文. 选项 - appendTo 此选项告诉应该将选择助手(套索)附加到哪个元素.默认情况下，其值为 body . 语法 $(".selector").selectlect({appendTo:"＃identifier"});
2	autoRefresh 此选项如果设置为 true ，则在选择操作开始时计算每个可选项的位置和大小.默认情况下，其值为 true . 选项 - autoRefresh 此选项如果设置为 true ，则在选择操作开始时计算每个可选项的位置和大小.默认情况下，其值为 true .如果您有许多项目，您可能需要将其设置为 false 并手动调用 refresh()方法. 语法 $(".selector").select({autoRefresh:false});
3	cancel 此选项禁止选择是否开始选择元素.默认情况下，其值为输入，文本区域，按钮，选择，选项. 选项 - 取消此选项禁止选择是否开始选择元素.默认情况下，其值为输入，文本区域，按钮，选择，选项. 语法 $(".selector").selectlect({cancel:"a .cancel"});
4	delay 此选项用于设置以毫秒为单位的时间，并定义何时开始选择.这可用于防止不必要的选择.默认情况下，其值为 0 . 选项 - 延迟此选项用于设置以毫秒为单位的时间，并定义何时开始选择.这可用于防止不必要的选择.默认情况下，其值为 0 . 语法 $(".selector").selectlect({delay:150});
5	disabled 此选项设置为true时，禁用选择机制.在使用可选择("enable")指令恢复机制之前，用户无法选择元素.默认情况下，其值为 false . 选项 - 已停用此选项设置为true时，禁用选择机制.在使用可选择("enable")指令恢复机制之前，用户无法选择元素.默认情况下，其值为 false . 语法 $(".selector").selectlect({disabled:true});
6	distance 此选项是鼠标必须移动以考虑正在进行的选择的距离(以像素为单位).例如，这有助于防止简单点击被解释为组选择.默认情况下，其值为 0 . 选项 - 距离此选项是鼠标必须移动以考虑正在进行的选择的距离(以像素为单位).例如，这有助于防止简单点击被解释为组选择.默认情况下，其值为 0 . 语法 $(".selector").select({distance:30});
7	filter 此选项是一个选择器，指示哪些元素可以作为选择的一部分.默认情况下，其值为 * . 选项 - 过滤器此选项是一个选择器，指示哪些元素可以作为选择的一部分.默认情况下，其值为 * . 语法 $(".selector").selectlect({filter:"li"});
8	tolerance 此选项指定用于测试选择助手(套索)是否应选择项目的模式.默认情况下，其值为触摸. 选项 - 容差此选项指定用于测试选择助手(套索)是否应选择项目的模式.默认情况下，其值为触摸. 这可以是 : fit : 此类型表示拖动选择必须完全包含要选择的元素. touch : 此类型表示拖动矩形只需要与可选项的任何部分相交. 语法 $(".selector").selectlect({tolerance:"fit"});

以下部分将向您展示一些可选功能的工作示例.

默认功能

以下示例演示了一个可选功能的简单示例，通过没有参数 selectable()方法.

               jQuery UI selectable-1                                                            Product 1         Product 2         Product 3         Product 4         Product 5         Product 6         Product 7

让我们将上述代码保存在HTML文件 selectableexample.htm 中，并在支持javascript的标准浏览器中打开它，你应该看到以下输出.现在，您可以使用结果

尝试单击产品，使用CTRLS键选择多个产品。

使用 Delay 和 Distance

以下示例演示了JqueryUI的可选功能中两个选项延迟和距离的用法。

               jQuery UI Selectable                                                   Starts after delay of 1000ms
               Product 1         Product 2         Product 3            Starts after mouse moves distance of 100px
               Product 4         Product 5         Product 6         Product 7

让我们将上述代码保存在HTML文件selectableexample.htm中，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。现在，你可以玩结果

尝试单击产品，使用CTRL键选择多个产品。您会注意到产品1，产品2和产品3的选择在延迟1000ms后开始。产品4，产品5，产品6和产品7的选择不能单独进行。只有在鼠标移动100px的距离后才会开始选择。

使用过滤器

以下示例演示了JqueryUI的可选功能中两个选项延迟和距离的用法。

               jQuery UI selectable-4                                                           Product 1         Product 2         Product 3         Product 4         Product 5         Product 6         Product 7

让我们将上述代码保存在HTML文件selectableexample.htm中，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。现在，你可以玩结果

尝试点击产品。您会注意到只能选择第一个产品。

$ (selector, context).selectable ("action", params) 方法

可选择的（"action"，params）方法可以对可选元素执行操作，例如防止可选功能。该动作在第一个参数中被指定为一个字符串（例如，"禁用"以停止选择）。请查看下表中可以传递的操作。

语法

$(selector, context).selectable ("action", params);;

下表列出了可以与此方法一起使用的不同操作


$( ".selector" ).selectable("destroy");
$( ".selector" ).selectable("disable");
$( ".selector" ).selectable("enable");
var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
var options = $( ".selector" ).selectable( "option" );
$( ".selector" ).selectable( "option", "disabled", true );
$( ".selector" ).selectable( "option", { disabled: true } );
$( ".selector" ).selectable("refresh");
var widget = $( ".selector" ).selectable( "widget" );

Sr.No.	Action & Description
1	destroy 此操作完全删除元素的可选功能。元素返回到pre-init状态。 Action - destroy 此操作完全删除元素的可选功能。元素返回到pre-init状态。 Syntax $( ".selector" ).selectable("destroy");
2	disable 此操作将停用元素的可选功能。此方法不接受任何参数。 Action - disable 此操作完全删除元素的可选功能。元素返回到pre-init状态。 Syntax $( ".selector" ).selectable("disable");
3	enable 此操作启用元素的可选功能。此方法不接受任何参数。 Action - enable 此操作启用元素的可选功能。此方法不接受任何参数。 Syntax $( ".selector" ).selectable("enable");
4	option( optionName ) 此操作获取当前与指定的optionName关联的值。 Action - option( optionName ) 此操作获取当前与指定的optionName关联的值。 Syntax var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
5	option() 此操作获取包含表示当前可选选项哈希的键/值对的对象。 Action - option() 此操作获取包含表示当前可选选项哈希的键/值对的对象。 Syntax var options = $( ".selector" ).selectable( "option" );
6	option( optionName, value ) 此操作设置与指定的optionName关联的可选选项的值。参数optionName是要设置的选项的名称，value是要为该选项设置的值。 Action - option( optionName, value ) 此操作设置与指定的optionName关联的可选选项的值。参数optionName是要设置的选项的名称，value是要为该选项设置的值。 Syntax $( ".selector" ).selectable( "option", "disabled", true );
7	option( options ) 此操作为可选择设置一个或多个选项。参数选项是要设置的选项 - 值对的映射。 Action - option( options ) 此操作为可选择设置一个或多个选项。参数选项是要设置的选项 - 值对的映射。 Syntax $( ".selector" ).selectable( "option", { disabled: true } );
8	refresh 此操作会导致刷新可选元素的大小和位置。主要用于禁用autoRefresh选项（设置为false）。此方法不接受任何参数。 Action - refresh 此操作会导致刷新可选元素的大小和位置。主要在禁用autoRefresh选项时使用。此方法不接受任何参数。 Syntax $( ".selector" ).selectable("refresh");
9	widget 此操作返回包含可选元素的jQuery对象。此方法不接受任何参数。 Action - widget 此操作返回包含可选元素的jQuery对象。此方法不接受任何参数。 Syntax var widget = $( ".selector" ).selectable( "widget" );

示例

现在让我们看一个使用上表中的操作的示例。以下示例演示了disable（）和option（optionName，value）方法的用法。

               jQuery UI Selectable                                                         Disabled using disable() method
               Product 1         Product 2         Product 3            Select using method option( optionName, value )
               Product 4         Product 5         Product 6         Product 7

让我们将上面的代码保存在HTML文件selectableexample.htm中，并在支持javascript的标准浏览器中打开它，你应该看到以下输出

尝试单击产品，使用CTRL键选择多个产品。您会注意到禁用了产品1，产品2和产品3。产品4，产品5，产品6和产品7的选择发生在鼠标移动1px的距离之后。

可选元素的事件管理

除了我们在前面几节中看到的selectable（options）方法之外，JqueryUI还提供了为特定事件触发的事件方法。这些事件方法如下所列


$( ".selector" ).selectable({   create: function( event, ui ) {}});
$( ".selector" ).selectable({   selected: function( event, ui ) {}});
$( ".selector" ).selectable({   selecting: function( event, ui ) {}});
$( ".selector" ).selectable({   start: function( event, ui ) {}});
$( ".selector" ).selectable({   stop: function( event, ui ) {}});
$( ".selector" ).selectable({   unselected: function( event, ui ) {}});
$( ".selector" ).selectable({   unselecting: function( event, ui ) {}});

Sr.No.	Event Method & Description
1	create(event, ui) 创建可选元素时会触发此事件。其中event是Event类型，ui是Object类型。 Event - create(event, ui) 创建可选元素时会触发此事件。其中event是Event类型，ui是Object类型。 Syntax $( ".selector" ).selectable({ create: function( event, ui ) {}});
2	selected(event, ui) 为每个被选中的元素触发此事件。其中event是Event类型，ui是Object类型。 Event - selected(event, ui) 为每个被选中的元素触发此事件。其中event是Event类型，ui是Object类型。 ui的可能值是 selected 这指定了已选择的可选项。 Syntax $( ".selector" ).selectable({ selected: function( event, ui ) {}});
3	selecting(event, ui) 将为即将被选中的每个可选元素触发此事件。其中event是Event类型，ui是Object类型。 Event - selecting(event, ui) 将为即将被选中的每个可选元素触发此事件。其中event是Event类型，ui是Object类型。 ui的可能值是 selecting 这指定了对即将被选中的元素的引用。 Syntax $( ".selector" ).selectable({ selecting: function( event, ui ) {}});
4	start(event, ui) 此事件在选择操作开始时触发。其中event是Event类型，ui是Object类型。 Event - start(event, ui) 此事件在选择操作开始时触发。其中event是Event类型，ui是Object类型。 Syntax $( ".selector" ).selectable({ start: function( event, ui ) {}});
5	stop(event, ui) 此事件在选择操作结束时触发。其中event是Event类型，ui是Object类型。 Event - stop(event, ui) 此事件在选择操作结束时触发。其中event是Event类型，ui是Object类型。 Syntax $( ".selector" ).selectable({ stop: function( event, ui ) {}});
6	unselected(event, ui) 对于未选中的每个元素，在选择操作结束时触发此事件。其中event是Event类型，ui是Object类型。 Event - unselected(event, ui) 对于未选中的每个元素，在选择操作结束时触发此事件。其中event是Event类型，ui是Object类型。 ui的可能值是 unselected 包含对已取消选择的元素的引用的元素。 Syntax $( ".selector" ).selectable({ unselected: function( event, ui ) {}});
7	unselecting(event, ui) 在选择操作期间，将针对即将取消选择的每个所选元素触发此事件。其中event是Event类型，ui是Object类型。 Event - unselecting(event, ui) 在选择操作期间，将针对即将取消选择的每个所选元素触发此事件。其中event是Event类型，ui是Object类型。 ui的可能值是 unselecting 一个元素，包含对即将取消选中的元素的引用。 Syntax $( ".selector" ).selectable({ unselecting: function( event, ui ) {}});

示例

以下示例演示了可选功能期间的事件方法用法。此示例演示了所选事件的使用。

               jQuery UI selectable-7                                                         Events
               Product 1         Product 2         Product 3         Product 4         Product 5         Product 6         Product 7            Selected Product>

让我们将上面的代码保存在HTML文件selectableexample.htm中，并在支持javascript的标准浏览器中打开它，你应该看到以下输出

尝试单击产品，使用CTRL键选择多个产品。您会注意到所选的产品编号打印在底部。