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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
javascript基础知识
Jun 07 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
JAVA/JSP学习系列之七
2006/10/09 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python 字典的打印实现
2019/09/26 Python
pycharm的python_stubs问题
2020/04/08 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
旅游文化节策划方案
2014/06/06 职场文书
市场调查策划方案
2014/06/10 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
先进个人自荐书
2015/03/06 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
2016党员党课心得体会
2016/01/07 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书