jQuery筛选过滤插件 - Filterizr

导语 简介Filterizr 是一款基于 jQuery 的筛选过滤插件,它提供了多重筛选过滤方式,能够满足你的不同需求。并且使用了 CSS3 过滤效果,使用户体验更优秀。使用方法1、引入文件<linkrel="stylesheet"href="css j

博学谷

简介

Filterizr 是一款基于 jQuery 的筛选过滤插件,它提供了多重筛选过滤方式,能够满足你的不同需求。并且使用了 CSS3 过滤效果,使用户体验更优秀。

使用方法

1、引入文件

  1. <link rel="stylesheet" href="css/jkresponsivegallery.css"> 
  2. <script src="js/jquery.min.js"></script> 
  3. <script src="js/jquery.filterizr.js"></script> 

2、HTML

  1. <div class="aseoe"> 
  2.     <div class="filtr-item" data-category="1, 5"> 
  3.         <img src="img/city_1.jpg" alt=""> 
  4.     </div> 
  5.     <div class="filtr-item" data-category="2, 5"> 
  6.         <img src="img/nature_2.jpg" alt=""> 
  7.     </div> 
  8.     <div class="filtr-item" data-category="1, 4"> 
  9.         <img src="img/city_3.jpg" alt=""> 
  10.     </div> 
  11.     ... 
  12. </div> 

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

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

1)单选:

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

2)多选:

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

3)排序:

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

4)搜索:

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

3、JavaScript

  1. $('.aseoe').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″)的标签才能触发控制

https://www.nucmc.com/ true jQuery筛选过滤插件 - Filterizr https://www.nucmc.com/show-79-816-1.html report 5870.5 简介Filterizr 是一款基于 jQuery 的筛选过滤插件,它提供了多重筛选过滤方式,能够满足你的不同需求。并且使用了 CSS3 过滤效果,使用户体验更优秀。使用方法1、引入文件<linkrel="stylesheet"href="css j
TAG:jQuery 过滤插件 Filterizr
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:BETWAY官网网 https://www.nucmc.com/show-79-816-1.html
BETWAY官网网 Copyright 2012-2014 www.nucmc.com All rights reserved.(晋ICP备13001436号-1)