Filterizr 是一个用于前端网页设计的 JavaScript 库，它可以快速地创建响应式过滤器和排序器，以及美化网站。本文将介绍如何使用 Filterizr，帮助读者轻松入门。
安装 Filterizr
Filterizr 是一个通过 npm 进行安装的 JavaScript 库。在命令行中，输入以下命令进行安装：
npm install filterizr
引入 Filterizr
在 HTML 文件中引入 Filterizr 的 CSS 和 JavaScript：
-- -------------------- ---- -------
------
----- ---------------- -----------------------------
-------
------
---- -------------------------
---- ---- ------- ---- ---
------
------- ------------------------------------
-------初始化 Filterizr
Filterizr 的初始化需要在所有数据加载完成之后进行。可以使用 window.onload 或 jQuery 的 $(document).ready() 方法等待页面完成加载后再进行初始化。
$(document).ready(function() {
$('.filter-container').filterizr();
});过滤器设置
类型过滤器
<button class="btn" data-filter="all">All</button> <button class="btn" data-filter=".webdesign">Web Design</button> <button class="btn" data-filter=".photography">Photography</button> <button class="btn" data-filter=".illustration">Illustration</button>
$('.filter-container').filterizr({
// 类型过滤器选择器
filter: '.filter-btns'
});排序器
<button class="btn" data-sort="default">Default</button> <button class="btn" data-sort="latest">Latest</button> <button class="btn" data-sort="oldest">Oldest</button>
$('.filter-container').filterizr({
// 排序器选择器
sort: '.sort-btns'
});示例代码
-- -------------------- ---- -------
------
----- ---------------- ------------------------------------------------------------------------------------
-------
------
---- -------------------------
---- ----------------- -------------- ------------
---- ----------------- ------------------------------
---- ----------------- --------------------------------
---- ----------------- -------------- ------------
---- ----------------- ------------------------------
---- ----------------- --------------------------------
---- ----------------- -------------- ------------
---- ----------------- ------------------------------
---- ----------------- --------------------------------
------
---- --------------------
------- ----------- ------------------------------
------- ----------- ---------------------------- ---------------
------- ----------- -----------------------------------------------
------- ----------- -------------------------------------------------
------
---- ------------------
------- ----------- ------------------------------------
------- ----------- ----------------------------------
------- ----------- ----------------------------------
------
------- ---------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------
--------
---------------------------- -
----------------------------------
------- ---------------
----- ------------
---
---
---------
-------结论
本文简要介绍了如何使用 Filterizr 库。希望对那些希望开发前端网页的读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37315