当前位置：首页 > 资讯 > 技术文档

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

时间：2021-03-16 11:10 编辑：来源：阅读：
扫一扫，手机访问

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

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

<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目标与类混合容器中的元素。分类过滤添加为类和排序属性添加自定义数据属性。 [b]建立你的过滤器控制： [/b]

class="filter" data-filter=".category-1">Category 1 
class="filter" data-filter=".category-2">Category 2

过滤发生在过滤器按钮被点击。 [b]建立您的排序控件： [/b]

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

排序发生在排序按钮被点击。 [b]CSS[/b]

#Container .mix{ 
  display: none; 
}

在项目的样式，设置目标元素没有显示属性。 MixItUp将只显示那些匹配当前的过滤元件。 [b]JS[/b] 实例MixItUp上使用jQuery的容器：

$(function(){ 
  $('#Container').mixItUp();  
});

使用我们的容器的ID，我们可以实例化MixItUp与jQuery的方法.mixItUp（） [url=https://mixitup.kunkalabs.com/]查看DEMO[/url] [url=https://github.com/patrickkunka/mixitup]立即下载[/url] 以上所述就是本文的全部内容了，希望大家能够喜欢。

全部评论(0)

上一篇：jquery 模式对话框终极版实现代码
下一篇：巧用jquery解决下拉菜单被Div遮挡的相关问题

资讯排行榜
更多>>