delta-jquery-control 是一种便捷的 jQuery 插件，用于处理类似于数据筛选、列表排序和结果过滤等前端场景，它极大的简化了前端代码的编写难度，包含 Ajax 查询，以及与动画效果搭配的交互效果。
安装 delta-jquery-control
delta-jquery-control 可以通过 npm 安装。在命令行中输入以下命令即可安装：
$ npm install delta-jquery-control
然后将 delta-jquery-control 添加到您的 HTML 页面中：
<script src="path/to/jquery.min.js"> </script> <script src="path/to/jquery.delta-control.min.js"> </script>
使用 delta-jquery-control
首先，在页面上添加一个包含 delta-control 的元素。最好是一个具有 ID 的 div：
-- -------------------- ---- -------
---- ----------------------
---- -------------------
------ ----------- -------------------- ---------------------
------
---- -----------------
-------- --------
------- --------------------------
------- --------------------------
------- ------------ ----------------------
------- ----------------------------------
---------
------
---- -------------------
---------- --------
----
----
-------
------ --------------- ---------------------- -------------------
----------
--------
-----
----
-------
------ --------------- ---------------------- -----------------
--------
--------
-----
----
-------
------ --------------- ---------------------- ----------------------
-------------
--------
-----
----
-------
------ --------------- ---------------------- ---------------
------
--------
-----
-----
------
------在上面的 HTML 代码中，我们创建了三个类别，分别为搜索、排序和过滤。我们将搜索框包含在一个包含 ID 的 div 中，并在每个类别内部使用了 data-filter 属性。
接下来，在 JavaScript 中，将会使用以下代码来初始化 delta-jquery-control：
$("#my-delta-control").deltaControl();这就是全部了！ delta-jquery-control 在页面加载时自动执行，默认情况下针对第一个 data-type 属性。
参数
delta-jquery-control 提供了一组可选的参数，您可以通过以下方式传递这些参数：
-- -------------------- ---- -------
-------------------------------------
------- -----------
---------- -------
--------- ----
------------ -
---- ------------------
----- -------
--------- ------
-
---filter
filter 参数表示需要筛选的元素集合。示例代码中，在看为每个电子产品添加了 .product 类，如果您的 HTML 结构不同，则可以自定义此属性。
animation
delta-jquery-control 提供了三种默认的动画："slide"、"fade" 和 "none"。默认值是"slide"。
duration
duration 参数是指动画时长，默认为 200 毫秒。
ajaxOptions
ajaxOptions 用于配置使用 Ajax 的相关参数。详见 jQuery Ajax API。
方法
delta-jquery-control 还提供了一些实用的公共方法。
refresh()
通过重新运行 filters 对元素进行筛选并更新结果列表。
$("#my-delta-control").deltaControl("refresh");reset()
重置所有元素的过滤器，并重新过滤并更新结果列表。
$("#my-delta-control").deltaControl("reset");以现实案例来展示 delta-jquery-control
我们假设您有一个名为 "products" 的项目，其 HTML 结构如下：
-- -------------------- ---- -------
---- ----------------------
---- -------------------
------ ----------- -------------------- ---------------------
------
---- -----------------
-------- --------
------- --------------------------
------- --------------------------
------- --------------------------
------- ----------------------------------
---------
------
---- -------------------
---------- --------
----
----
-------
------ --------------- ---------------------- -------------------
----------
--------
-----
----
-------
------ --------------- ---------------------- -----------------
--------
--------
-----
----
-------
------ --------------- ---------------------- ----------------------
-------------
--------
-----
----
-------
------ --------------- ---------------------- ---------------
------
--------
-----
-----
------
------
---- -----------------
---- --------------- ---------------------- ---------------------- ---------------------------
-------------------
---
------ ------ ---- -- -------- ----- ------- -------- ----- ---------- ---------- ----- ---------- ------- --- ------ ------- --- --------- -- -------- -------- -- ----- -------------
----
------
---- --------------- ------------------ ---------------------- ---------------------------
---------------
---
---- - -------- ----------- ---- --- ---- -- ---- ---- ---- -------- ------ ------ --- --- -------- --- ----- --- ------- ------- ----------- ----- ------
----
------
---- --------------- ------------------ -------- ---------------------- -----------------------
----------- ------------
---
--- -- ----- ---- --- ----------- ------- -------- ---- ----- --- ------- -------- ------ ----- --- --- ---- --------- ----- ---- ------ --- ---- ----------
----
------
---- --------------- ----------------- ------ ---------------------- -------------------------
---------- ----------
---
----- ---- --- ----- ---- - ------- --- -- ------- ---- ------------ ------ ----- ------ -------- ------------ ------------ --- ------
----
------
---- --------------- ---------------------- ---------------------- ---------------------------
-------------------
---
---- --------- ---- --- ------ ----------- ---- -------- ------ ------ ---------- --------- -------- ------ -------- --- - ------------ --------
----
------
---- --------------- -------------- ---------------------- ------------------------------
-----------
---
----- ---- -------- ------ --- -- ----- -- ---- -------- -- --- --- ---- -------- ----- -------- --- - ----- ------- ---- --- -------- -------- -- --- ---- ------------- -------
----
------
------接下来，我们将通过代码来实现在 delta-jquery-control 中进行数据筛选、列表排序和结果过滤的示例。
数据筛选
创建一个 delta-jquery-control 实例，对 "data-name" 进行筛选。
-- -------------------- ---- ------- ------------------------------------- ------- ----------- ---------- -------- --------- --- --- --------------------------------------------------- ---------- - ----------------------------------------------- ---
列表排序
通过 delta-jquery-control 可以轻松针对 "data-date" 列表数据进行排序。
$('select[data-filter="sort-select"]').on("change", function() {
$("#my-delta-control").deltaControl("refresh");
});结果过滤
通过 delta-jquery-control 轻松过滤 "data-category" 数据。
$('ul[data-filter="checkbox"]').on("change", function() {
$("#my-delta-control").deltaControl("refresh");
});总结
delta-jquery-control 是一种非常便利和实用的 jQuery 插件。它可以帮助您轻松实现各种前端筛选、列表排序和结果过滤的场景。借助其提供的方法和参数，可以让您轻松控制和调整应用程序工作方式，并使其实现了易于维护、可靠稳定的结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5251ab1864dac66907