打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
jQuery筛选列表过滤插件Filterizr
 查看演示  website
插件描述:Filterizr 是一款基于 jQuery 的筛选过滤插件,它提供了多重筛选过滤方式,能够满足你的不同需求。并且使用了 CSS3 过滤效果,使用户体验更优秀。
使用方法
1、引入文件
1
2
<script src="js/jquery.min.js"></script>
<script src="js/jquery.filterizr.js"></script>
2、HTML
1
2
3
4
5
6
7
8
9
10
11
12
<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)单选:
1
2
3
4
<li data-filter="all">全部</li>
<li data-filter="1">分类1</li>
<li data-filter="2">分类2</li>
<li data-filter="3">分类3</li>
2)多选:
1
2
3
<li data-multifilter="1">代码</li>
<li data-multifilter="2">素材</li>
<li data-multifilter="3">模板</li>
3)排序:
1
2
3
<li class="shuffle-btn" data-shuffle>随机</li>
<li class="sort-btn" data-sortAsc>顺序</li>
<li class="sort-btn" data-sortDesc>倒序</li>
4)搜索:
1
<input class="keyword" placeholder="请输入关键字" data-search>
3、JavaScript
1
$('.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″)的标签才能触发控制
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
JQUERY 获取当前焦点对象属性,
一款简单实用的jQuery图片画廊插件
jQuery实现图片放大预览效果
响应式内容滑动插件jQuery.bxSlider
jquerymobile 一个容易的九宫格实现(Gallery)
基于jquery右侧悬浮加入购物车代码
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服