jQuery筛选列表过滤插件Filterizr

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

 12567  108  查看评论 (10)
 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拖拽排序插件jQuery Sortable

灵活且有主见的排序 jQuery 插件
  筛选及排序
 16058  27

jQuery表格筛选插件XLS TableFilter

xlsTableFilter:创建一个表包含标题的Excel风格的过滤器对话框
  筛选及排序
 24121  33

jquery图片筛选排序过滤效果(让图片自动归类)

非常不错的图片筛选排序效果,点击顶部预先设计好的按钮,图片会自动归类。最好看的地方也就出现了,排序的过程非常不错
  筛选及排序
 17108  54

jQuery图片筛选过滤器效果

jQuery选项卡形式图片按分类过滤
  筛选及排序
 10413  190

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币

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

    确实很有用的筛选器

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

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

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

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

    回复
    朝阳Rex 0
    2017/6/30 17:49:33
    可以去掉全部加载的按钮吗?js部分哪里需要改动,着急用,麻烦告诉一下
        光明正大520左氏也0
        2017/7/4 15:24:49

        我也不清楚哦,只能自己另外用js控制哦,嘻嘻

    回复
    小丸子的樱桃发卡 0
    2017/5/19 15:49:16

    有一点小瑕疵,就是如果输入的字母不是连着的,就筛选不出来了,如果可以把这个地方改进就完美了

    回复
    ban ban ban 0
    2016/12/18 13:12:11

    没有CSS文件 用不了

        别辜负这本该奋斗の青春0
        2017/1/17 10:43:34

        你是不是初学者?你下载下来的 怎么会没有css,全部都很齐全

    回复
    junyi5d 0
    2016/7/29 15:07:45
    如果能加上resize就好了。。改变窗口也能重新计算宽高 回复
取消回复