jQuery插件MixItUp实现动画过滤和排序


Posted in Javascript onApril 12, 2015

什么是MixItUp?

MixItUp是一个jQuery插件,提供动画过滤和排序。
MixItUp是伟大的,像管理投资组合,画廊和博客的任何分类或排序的内容,而且还可以作为一个功能强大的工具,从事应用程序的用户界面和数据可视化。
MixItUp起着很好的与您现有的HTML和CSS,使之成为响应布局的绝佳选择。
而不是用绝对定位来控制布局,MixItUp设计与现有的在线流布局工作。要使用百分比,媒体查询,inline-block的,甚至是弯曲盒子?没问题!

页面代码

<div id="Container"> 
  <div class="mix category-1" data-my-order="1"> ... </div> 
  <div class="mix category-1" data-my-order="2"> ... </div> 
  <div class="mix category-2" data-my-order="3"> ... </div> 
  <div class="mix category-2" data-my-order="4"> ... </div> 
</div>

MixItUp目标与类混合容器中的元素。分类过滤添加为类和排序属性添加自定义数据属性。

建立你的过滤器控制:

class="filter" data-filter=".category-1">Category 1 
class="filter" data-filter=".category-2">Category 2

过滤发生在过滤器按钮被点击。

建立您的排序控件:

class="sort" data-sort="my-order:asc">Ascending Order 
class="sort" data-sort="my-order:desc">Descending Order

排序发生在排序按钮被点击。

CSS

#Container .mix{ 
  display: none; 
}

在项目的样式,设置目标元素没有显示属性。 MixItUp将只显示那些匹配当前的过滤元件。

JS

实例MixItUp上使用jQuery的容器:

$(function(){ 
  $('#Container').mixItUp();  
});

使用我们的容器的ID,我们可以实例化MixItUp与jQuery的方法.mixItUp()

查看DEMO   立即下载

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js获取单选框或复选框值及操作
Dec 18 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
jQuery实现简单二级下拉菜单
Apr 12 #Javascript
纯JS实现旋转图片3D展示效果
Apr 12 #Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 #Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 #Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 #Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 #Javascript
JavaScript 面向对象与原型
Apr 10 #Javascript
You might like
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
javascript各种复制代码收集
2008/09/20 Javascript
学习ExtJS form布局
2009/10/08 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
利用python如何处理nc数据详解
2018/05/23 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
大学生就业自我鉴定
2013/10/26 职场文书
专科毕业生就业推荐信
2013/11/01 职场文书
项目经理岗位职责
2013/11/11 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
暑期培训班策划方案
2014/08/26 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
被告代理词范文
2015/05/25 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
详解Redis基本命令与使用场景
2021/06/01 Redis