MixItUp动画过滤和排序jQuery插件
栏目分类：效果代码发布日期：2014-09-11 来源：浏览次数：次

什么是MixItUp？MixItUp是一个jQuery插件，提供动画过滤和排序。MixItUp是伟大的，像管理投资组合，画廊和博客的任何分类或排序的内容，而且还可以作为一个功能强大的工具，从事应用程序的用户界面和数据可视化。

什么是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 立即下载

相关热词：MixItUp 排序 jQuery插件

上一篇：一款图片弹出层相册jQuery插件for jQuery

jQuery简单二级下拉菜单：下一篇

MixItUp动画过滤和排序jQuery插件
栏目分类：效果代码发布日期：2014-09-11 来源：浏览次数：次

CSS

相关内容

这些是最新的

热门关键词

热门排行

关于聚合分享

版权声明

MixItUp动画过滤和排序jQuery插件 栏目分类：效果代码 发布日期：2014-09-11 来源： 浏览次数：次

CSS

相关内容

这些是最新的

热门关键词

热门排行

关于聚合分享

版权声明

MixItUp动画过滤和排序jQuery插件
栏目分类：效果代码发布日期：2014-09-11 来源：浏览次数：次