jQuery UI 可选过滤器选项

简介

jQuery UI 可选过滤器（Selectable Filter）是一个简单易用的 UI 组件，它允许用户选择一组元素中的一个或多个元素。可选过滤器是基于 jQuery UI Selectable Widget 实现的。

可选过滤器提供了丰富的选项，包括过滤器选择器、选择模式、禁用选项、回调函数等，使开发者能够更加灵活地使用该组件。

安装

可选过滤器是基于 jQuery UI 实现的，因此需要先引入 jQuery UI 库。

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

基本用法

HTML 结构

可选过滤器要求被选择的元素具有共同的父元素，因此需要将这些元素包含在一个容器中。

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

初始化

在页面加载完成后，通过调用 selectable() 方法来初始化可选过滤器。

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

选项

可选过滤器提供了丰富的选项，使开发者能够更加灵活地使用该组件。

以下是可选过滤器的常用选项。

filter

过滤器选择器，用于指定被选择的元素。默认为 "*"，即所有元素都可被选择。

$(function() {
    $("#myList").selectable({
        filter: ".item"
    });
});

tolerance

选择模式。可选的值为 fit 和 touch。

• fit 表示只有完全包含在选择框内的元素才会被选择。默认值。
• touch 表示只要选择框与元素有任何交集，该元素就会被选择。

$(function() {
    $("#myList").selectable({
        tolerance: "touch"
    });
});

disabled

是否禁用可选过滤器。默认为 false。

$(function() {
    $("#myList").selectable({
        disabled: true
    });
});

cancel

选择时忽略的元素选择器。例如，如果选择框内包含一个文本框，该文本框将不会被选择。

$(function() {
    $("#myList").selectable({
        cancel: "input"
    });
});

start

开始选择时触发的回调函数。

$(function() {
    $("#myList").selectable({
        start: function(event, ui) {
            console.log("选择开始");
        }
    });
});

selected

选择某个元素时触发的回调函数。

$(function() {
    $("#myList").selectable({
        selected: function(event, ui) {
            console.log("选择了" + ui.selected.text());
        }
    });
});

unselected

取消选择某个元素时触发的回调函数。

$(function() {
    $("#myList").selectable({
        unselected: function(event, ui) {
            console.log("取消选择了" + ui.unselected.text());
        }
    });
});

stop

选择结束时触发的回调函数。

$(function() {
    $("#myList").selectable({
        stop: function(event, ui) {
            console.log("选择结束");
        }
    });
});

总结

通过本文，我们了解了 jQuery UI 可选过滤器的基本用法和常用选项，可以帮助开发者更加灵活地使用该组件。在实际开发中，可选过滤器通常用于实现批量操作功能，如批量删除、批量移动等。