71

0

MixItUp

用于动画过滤、排序、插入、删除等的高性能、无依赖库

MixItUp 3

构建状态 覆盖状态 jsDelivr 命中

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

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

如需实时沙箱、完整文档、教程等,请访问kunkalabs.com/mixitup

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

许可

MixItUp 是开源的,可免费用于非商业、教育和非营利用途。要在商业项目中使用, 需要商业许可证 。有关许可信息和常见问题解答,请参阅MixItUp 许可页面。

文档

浏览器支持

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

  • Chrome 16+
  • Firefox 16+
  • Safari 6.2+
  • Yandex 14+
  • Edge 13+
  • IE 10+ (with animations), IE 8-9 (no animations)

入门

最常见的是,MixItUp 应用于“目标”元素的 “容器” ,它可以是项目组合、博客文章列表、产品选择或任何类型的 UI,其中过滤和/或排序将是有利的.

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

构建容器

默认情况下,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 容器

建筑控制

过滤和排序发生的一种方式是单击控件时。您可以使用任何可点击元素作为控件,但 <button type="button">建议使用可访问性。

过滤器控件

过滤器控件根据 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 进行排序

样式化容器

虽然 MixItUp 可以添加到任何现有的 CSS 布局之上,但出于多种原因,在处理基于网格的设计时,我们强烈建议使用内联块或基于 flexbox 的样式而不是浮动和传统的网格框架。

进一步阅读:MixItUp 网格布局

加载 MixItUp

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

脚本标签

在您的项目中加载 MixItUp 的最简单方法是通过页面上 <script>结束标记之前的标记将其包含在内 </body>

        ...

        <script src="/path/to/mixitup.min.js"></script>
    </body>
</html>

使用这种技术,MixItUp 工厂函数将通过全局变量提供 mixitup

模块导入

如果您正在使用 Webpack、Browserify 或 RequireJS 构建模块化 JavaScript 项目,则可以使用您选择的包管理器(例如 npm、jspm、yarn)安装 MixItUp,然后将其导入项目的任何模块中。

npm install mixitup --save

// ES2015

import mixitup from 'mixitup';
// CommonJS

var mixitup = require('mixitup');
// AMD

require(['mixitup'], function(mixitup) {

});

创建混音器

使用 mixitup()可用的工厂功能,您现在可以在容器上实例化一个“混合器”以启用 MixItUp 功能。

调用工厂函数,将选择器字符串或对容器元素的引用作为第一个参数,然后将返回新实例化的混音器。

示例:使用选择器字符串实例化混音器
var mixer = mixitup('.container');
示例:使用元素引用实例化混频器
var mixer = mixitup(containerEl);

您的混音器现在可以通过它的控件(见上文)或它的 API(见混音器 API 方法)进行交互。单击控件或调用 API 方法以检查一切是否正常。

配置

如果您希望自定义混音器的功能,可以将可选的“配置对象”作为第二个参数传递给该 mixitup函数。如果没有传递配置对象,将使用默认设置。

进一步阅读:配置对象

示例:传递配置对象
var mixer = mixitup(containerEl, {
    selectors: {
        target: '.blog-item'
    },
    animation: {
        duration: 300
    }
});

使用 API

如果您希望通过其 API 与混音器进行交互,工厂函数返回的混音器引用可用于调用 API 方法。

示例:调用 API 方法
var mixer = mixitup(containerEl);

mixer.filter('.category-a');

进一步阅读:Mixer API 方法

构建现代 JavaScript 应用程序?

您可能希望使用 MixItUp 3 的新“数据集”API。Dataset 设计用于 API 驱动的 JavaScript 应用程序,可以用来代替基于 DOM 的方法,例如 .filter().sort().insert()等。使用时,插入、删除、排序和分页可以完全通过更改数据模型来实现,无需直接与 DOM 交互或查询 DOM。

进一步阅读:使用数据集 API