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

前端技术 2023/09/09 JavaScript

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

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

本文地址：https://www.stayed.cn/item/24973

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案