查看演示 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″)的标签才能触发控制
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。