阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.MixItUp 中文 API 文档

      插件 jQuery.MixItUp 中文 API 文档

      MixItUp 是一个高性能,无依赖的动画 DOM 操作库,使您能够使用漂亮的动画过滤,排序,添加和删除 DOM 元素。

      MixItUp 可与您现有的 HTML 和 CSS 配合使用,使其成为响应式布局的绝佳选择,并与内联流,百分比,媒体查询,Flexbox 等兼容。

      有关实时沙箱,完整文档,教程等内容,请访问 kunkalabs.com/mixitup。

      从 MixItUp 2 迁移?查看 MixItUp 3 迁移指南。

      浏览器支持

      MixItUp 3 已经过测试,可与以下浏览器兼容。

      • Chrome 16+
      • Firefox 16+
      • Safari 6.2+
      • Yandex 14+
      • Edge 13+
      • IE 10+(带动画),IE 8-9(无动画)

      入门

      内容

      • 构建容器
      • 建筑控制
      • 造型容器
      • 加载 MixItUp
      • 创建一个混音器
      • 组态

      最常见的,MixItUp 应用到“容器”的“目标”元素,这可能是项目组合,博客文章列表,选择的产品,或任何种类的用户界面,其中的过滤和 / 或排序将是有利的。

      要开始使用,请按照以下简单步骤操作:

      构建容器

      默认情况下,MixItUp 将在容器中查询与选择器匹配的目标'.mix'。

      <div class="container">
          <div class="mix category-a" data-order="1"></div>
          <div class="mix category-b" data-order="2"></div>
          <div class="mix category-b category-c" data-order="3"></div>
          <div class="mix category-a category-d" data-order="4"></div>
      </div>
      
      

      可以使用任何有效选择器来过滤目标,例如'.category-a',并且通过可选的自定义数据属性对目标进行排序’data-order'。

      进一步阅读:标记 MixItUp 容器

      建筑控制

      过滤和排序的一种方法是单击控件。您可以使用任何可点击元素作为控件,但

      过滤控制

      滤波器控制是基于存在查询 data-filter 属性,其值必须是’all',‘none’,或者一个有效选择器字符串例如'.category-a'。

      <button type="button" data-filter="all">All</button>
      <button type="button" data-filter=".category-a">Category A</button>
      <button type="button" data-filter=".category-b">Category B</button>
      <button type="button" data-filter=".category-c">Category C</button>
      
      

      进一步阅读:使用 MixItUp 过滤

      排序控件

      排序控制是基于存在查询 data-sort 属性,其值取“之类的字符串”补足到排序的属性的名称的形式,接着任选的冒号分隔的排序顺序例如’order',‘order:asc’,‘order:desc’。

      <button type="button" data-sort="order:asc">Ascending</button>
      <button type="button" data-sort="order:descending">Descending</button>
      <button type="button" data-sort="random">Random</button>
      
      

      值’default’和’random’也是有效的,以’default’在混频器实例化时参照的目标元素的原始顺序在 DOM。

      进一步阅读:使用 MixItUp 进行排序

      造型容器

      虽然可以在任何现有 CSS 布局的基础上添加 MixItUp,但出于多种原因,我们强烈建议在处理基于网格的设计时基于浮动和遗留网格框架的基于内联块或基于 Flexbox 的样式。

      进一步阅读:MixItUp 网格布局

      加载 MixItUp

      首先,使用项目的首选方法加载 MixItUp JavaScript 库。

      脚本标记

      在项目中加载 MixItUp 的最简单方法是在页面上

      目录
      目录