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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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实现的随机广告显示代码
2007/06/14 PHP
php 上传功能实例代码
2010/04/13 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
简单了解OpenCV是个什么东西
2017/11/10 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
django解决跨域请求的问题详解
2019/01/20 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
学python需要去培训机构吗
2020/07/01 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
音乐兴趣小组活动总结
2014/07/07 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
党员个人承诺书
2015/04/27 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技