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

什么是MixItUp?

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

页面代码

rush:xhtml;">

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

建立你的过滤器控制:

rush:xhtml;"> class="filter" data-filter=".category-1">Category 1 class="filter" data-filter=".category-2">Category 2

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

建立您的排序控件:

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

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

CSS

rush:css;"> #Container .mix{ display: none; }

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

JS

实例MixItUp上使用jQuery的容器:

rush:js;"> $(function(){ $('#Container').mixItUp(); });

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

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

相关文章

jQuery表单验证提交:前台验证一(图文+视频)
jQuery表单验证提交:前台验证二(图文+视频)
jQuery如何实时监听获取input输入框的值
JQuery怎么判断元素是否存在
jQuery如何实现定时重定向
jquery如何获取复选框选中的值