jQuery UI 实例 - 选择（Selectable）

jQuery UI 是一个基于 jQuery 的前端框架，提供了一系列实用的 UI 组件，其中包括选择（Selectable）组件。选择组件可以帮助用户用鼠标在指定区域内选择多个元素，非常适合用于类似于图库的多选操作。接下来我们将详细介绍选择组件的使用方法。

依赖项

在使用选择组件之前，我们需要先引入一些依赖项。这些依赖项包括以下文件：

• jQuery v1.12.4 或更高版本
• jQuery UI v1.11.4 或更高版本

我们可以通过以下代码来引入这些依赖项：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

演示

让我们来看一个最简单的选择组件实例，首先编写一段 HTML 代码。

<ul id="selectable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
    <li class="ui-state-default">Item 6</li>
</ul>

在上述代码中，我们定义了一个 ul 元素，并且每个 li 元素都带有一个类名为 ui-state-default。

选择组件需要我们使用一个 JavaScript 函数来初始化，如下所示：

$(function() {
    $( "#selectable" ).selectable();
});

在上述代码中，我们使用了 jQuery 的文档就绪函数来初始化选择组件。

现在我们就可以在网页上看到我们的选择组件了。试着用鼠标点击并拖动指定区域内的元素，你会看到这些元素被选中了。

选项

选择组件提供了一些选项以方便我们对其进行自定义配置。例如，我们可以指定选择的范围，以及选择结束时触发的回调函数。下面是一些常用的选项：

• autoRefresh: 是否自动调整选择框位置，布尔值，默认为 true。
• cancel: 选择框不可选择的元素的选择器，字符串，默认为 “:input,option”。
• classes: 样式类，对象类型，默认为 null。
• disabled: 是否禁用选择功能，布尔值，默认为 false。
• filter: 可以选择的元素的选择器，字符串，默认为 “*”
• tolerance: 选择框的容错率，字符串，默认为 “touch”。
• unselected: 未选中元素的样式类，字符串，默认为 “ui-selected”。

我们可以使用以下方法来初始化选择组件的选项：

$(function() {
    $( "#selectable" ).selectable({
        // 选项
    });
});

事件

选择组件还提供了一些事件回调函数，使我们能够在选择发生变化时做出相应的响应。比较常用的事件包括：

• selected: 选中元素时触发。
• selecting: 正在选中元素时触发。
• start: 开始选择时触发。
• stop: 完成选择时触发。

上述事件回调函数都可以接受两个参数：event 和 ui，其中 ui 对象提供了有关选择状态的信息。例如，我们可以使用以下代码来检测选择列表中选中元素的数量，并在满足特定条件时发出警报：

$(function() {
    $( "#selectable" ).selectable({
        stop: function(event, ui) {
            var selectedElements = $(this).find('.ui-selected');
            if (selectedElements.length > 3) {
                alert('最多只能选中三个元素！');
                $(this).find('.ui-selected').removeClass('ui-selected');
            }
        }
    });
});

在上述代码中，我们检查列表中选中元素的数量是否超过了 3 个，并使用弹窗来发出警报。如果满足条件，我们将取消所有已选中的元素。

总结

选择组件是 jQuery UI 中非常实用的组件之一，能够大大简化用户的选择操作。希望通过本文的介绍，读者们能够掌握选择组件的基本使用方法，并且能够对其进行自定义配置和事件处理。