jQuery筛选列表过滤插件Filterizr

所属分类:UI-筛选及排序

 50698  427  查看评论 (20)
分享到微信朋友圈
X
 jQuery筛选列表过滤插件Filterizr ie兼容10

使用方法

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.filterizr.js"></script>

2、HTML

<div class="jq22">
    <div class="filtr-item" data-category="1, 5">
        <img src="img/a1.png" alt="">
    </div>
    <div class="filtr-item" data-category="2, 5">
        <img src="img/a2.png" alt="">
    </div>
    <div class="filtr-item" data-category="1, 4">
        <img src="img/a3.png" alt="">
    </div>
    ...
</div>

为标签加上 data-category 属性,用于指定分类 id,可以有多个分类,用都好“,”分开。

如果需要在额外的标签中加入控制,需要用到其他的 data 属性,如:

1)单选:

<li data-filter="all">全部</li>
<li data-filter="1">分类1</li>
<li data-filter="2">分类2</li>
<li data-filter="3">分类3</li>

2)多选:

<li data-multifilter="1">代码</li>
<li data-multifilter="2">素材</li>
<li data-multifilter="3">模板</li>

3)排序:

<li class="shuffle-btn" data-shuffle>随机</li>
<li class="sort-btn" data-sortAsc>顺序</li>
<li class="sort-btn" data-sortDesc>倒序</li>

4)搜索:

<input class="keyword" placeholder="请输入关键字" data-search>

3、JavaScript

$('.jq22').filterizr();

配置

属性

名称类型默认值说明
animationDuration数值0.5
动画持续时间,单位为秒
callbacks对象
回调函数
delay对象0延迟,单位为毫秒
delayMode字符串progressive
easing字符串ease-out动画方式
filter数组/字符串0指定筛选/过滤某分类
filterOutCss对象
”淡出“的样式
filterInCss对象
”淡入“的样式
layout字符串sameSize布局方式,可选 packed / horizontal / vertical / sameHeight / sameWidth / sameSize
setupControls布尔值true建立控制,设置为 true 时,对应的含有 data 属性(如 data-filter=”1″)的标签才能触发控制


相关插件-筛选及排序

jquery仿app产品筛选列表

jquery仿app产品筛选列表
  筛选及排序
 51852  384

前端表格排序插件,支持ajax分页

jQuery前端表格排序插件,支持ajax分页,后端分页只排序当前页,或前端分页排序
  筛选及排序
 33609  354

仿当当移动端筛选

仿当当网移动端条件筛选
  筛选及排序
 37001  355

jQuery根据条件筛选数据

jQuery根据输入关键字和选择的条件进行筛选,常用代码简单实用。
  筛选及排序
 26291  319

讨论这个项目(20)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    四川企春秋 0
    2022/1/12 18:09:37
    求助:页面报错:Uncaught TypeError: Cannot read properties of undefined (reading 'push')。。页面打开时,filtr-item隐藏 回复
    miya006 0
    2019/8/10 23:45:18
    data-category 的值,只能是数字,不能有英文
    不晓得是不是因为都在判别数字大小,
    ret[n] > self._parent._lastCategory

    资料库类别多了,如果没搭着英文数字一起命名,挺吓人的...
    有人找到解决方法了吗? 回复
    Stephywang汪 0
    2019/3/23 20:30:19
    结果能统计出数量不 回复
    Monica 0
    2018/11/30 10:03:03
    这个回调怎么不好使了啊,加上没反应 回复
    最美的主题 0
    2018/4/27 14:43:40
    我也踩了个坑,只能1-9的数字 ,我特么正好十个分类,其他数字不支持。蛋疼
        miya0061
        2019/8/10 23:37:41
        我也找了好久改的方法..
        我试着在jquery.filterizr 的149行 self._lastCategory = 0;
        '0' 改成你要用的最大值,比如你有99个项目,就改成 self._lastCategory = 99;
        测试是Ok的,试看看吧^^
    回复
    感应 0
    2018/2/10 11:52:29
    能配合bootcss响应式布局使用吗
    回复
    ou494491855 0
    2017/12/20 10:20:27

    踩了个坑,用最新版的jq(v3.2.1)发现插件无法起作用,分析源码断点发现是jq版本问题,换成下载里的版本(v1.12.0)就解决了

    回复
    ◆欣欣向荣◆ 0
    2017/12/11 12:48:28

    确实很有用的筛选器

    回复
    TJone 0
    2017/11/6 16:38:27

    你好,请问一下这个筛选器,是不能获取动态创建的元素内容吗?我把列表全部写在html里面,功能正常;然后我将列表动态创建后,就不行了。js里面我添加了data-category的值

        ou4944918550
        2017/12/19 16:36:26

        你可以在创建后再初始化一次

    回复
    朝阳Rex 0
    2017/6/30 17:50:32

    每次页面加载都是全部加载出来,可以去掉全部加载按钮吗?

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复