jQuery插件MixItUp实现动画过滤和排序
2015-04-12 11:06
1366 查看
什么是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()
以上所述就是本文的全部内容了,希望大家能够喜欢。
您可能感兴趣的文章:
相关文章推荐
- MixItUp:超炫!基于 CSS3 & jQuery 的过滤和排序插件
- jQuery MixItUp插件实现列表过滤和排序
- jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
- MixItUp功能强大的jQuery画廊插件
- jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
- html5 jqueryrotate插件实现旋转动画
- jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
- Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
- jQuery实现带水平滑杆的焦点图动画插件
- html5 jqueryrotate插件实现旋转动画
- 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果
- JQuery插件Quicksand实现超炫的动画洗牌效果
- Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
- jQuery插件Slider Revolution实现响应动画滑动图片切换效果
- jQuery实现带水平滑杆的焦点图动画插件
- Jquery实现弹出层分享微博插件具备动画效果
- jQuery和CSS3超酷元素分类过滤和排序插件
- MixItUp:排序也能这么动感
- jQuery插件Slider Revolution实现响应动画滑动图片切换效果