mixitup意思_使用MixItUp 3 JS库进行动画过滤和排序

最新推荐文章于 2022-11-08 07:29:41 发布

dingshi7798

最新推荐文章于 2022-11-08 07:29:41 发布

阅读量434

点赞数

文章标签：过滤器 java css javascript html ViewUI

原文链接：https://www.sitepoint.com/animated-filtering-sorting-mixitup/

版权

mixitup意思

过滤和排序网站的某些部分是组织内容的一种好方法。作品集，专辑和博客只是您可能要分类的一些示例。为此，许多JavaScript库都可以提供帮助。最受欢迎的两个是MixItUp和Isotope库。

在本文中，我将介绍MixItUp 3（撰写本文时的最新版本）的基本功能，并向您展示在项目中利用它的所有步骤。为了更好地演示该库的工作原理，我还创建了一个demo ，我将在本文中引用它。

注意：本文已于2017年2月更新，以涵盖MixItUp库的v3

什么是MixItUp 3？

如上所述，MixItUp 3是一个无依赖JavaScript库，使您可以使用基于CSS的动画对元素进行过滤和排序。它由Patrick Kunka创建，带有许多不同的自定义选项和详细的文档。您可以将其轻松集成到现有布局中。所需要做的只是针对所需的元素，库将为您完成艰巨的工作。

对于非商业项目，您可以免费使用。但是，商业项目需要许可证。更多信息可在此页面上获得。

该库可在所有现代浏览器中使用（包括具有完整功能的IE10 +，具有后备功能，但IE8 +中没有动画）。

既然我们已经了解了库的功能，那么我们来看一下使用库所需的步骤。

MixItUp 3入门

要开始使用MixItUp 3，首先必须将其包含在项目中。您可以通过访问其GitHub页面或使用软件包管理器（如npm）来下载它。

对于我们的演示，我们将使用第一个选项。所需的脚本将放置在结束</body>标记之前，如下所示：

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

让我们继续内容的结构。

建造容器

首先，我们将要排序和过滤的元素包装在容器中。每个包装的元素都应指定一个通用的类名。在我们的例子中，类名是mix-target 。容器将使用此类来标识哪些是目标元素。此外，我们为此容器分配了唯一的ID（ mix-wrapper ）。稍后，我们将其定位为初始化MixItUp的实例。

这是演示我刚才描述HTML：

<ul class="courses" id="mix-wrapper">
   <li class="mix-target">
      <a href="#">Economics<span>(U)</span></a>
   </li>
  <li class="mix-target">
     <a href="#">Pharmacology<span>(G)</span></a>
  </li>

  <!-- more list items here -->
</ul>

至此，我们已经建立了元素的基本结构。现在，我们准备查看过滤和排序的工作方式。

筛选

我们首先确定内容中的过滤器类别。在这个例子中，我们将使用一些与教育相关的类别： undergraduate ， graduate和phd 。然后，将它们作为类添加到目标元素。

这是前两个项目的标记：

<li class="mix-target undergraduate">
    <a href="#">Economics<span>(U)</span></a>
  </li>
  <li class="mix-target graduate">
    <a href="#">Pharmacology<span>(G)</span></a>
  </li>

接下来，我们定义将显示过滤器项的单击处理程序。我们将使用<button>元素执行此操作。我们向它们每个添加filter-btn类和data-filter属性。自定义属性的值应与已应用于目标元素的类名称匹配。关键字all和none也是可能的值。

我们的两个过滤器按钮如下所示：

<button class="filter-btn" data-filter=".undergraduate">Undergraduate</button>
<button class="filter-btn" data-filter=".graduate">Graduate</button>

默认情况下，首次加载MixItUp时，它将显示所有目标元素。这意味着将触发具有自定义属性data-filter="all"的<button> 。此外，该库将programs-filter-btn-active类应用于此按钮。这使我们可以设置所选过滤/排序选项的样式，以表明它已被选中。

这是在演示中设置样式的方法：

.programs button.programs-filter-btn-active,
.programs button.programs-sort-btn-active {
   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset, 0px 0px 1px transparent;
   background: #3a9fbf;
   color: white;
}

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

到目前为止，一次只能启用一个过滤器控件。但是，假设我们要基于多个过滤器控件进行过滤。例如，在我们的情况下，我们应该能够同时看到本科和研究生课程。幸运的是，我们可以利用切换控件来做到这一点。您可以在此Codepen演示中看到带有切换处理程序的示例。

现在让我们继续进行排序。

排序

我们要做的第一件事是识别我们要排序的属性。在我们的项目中，这些是order和year属性。下一步，我们使用它们的名称将自定义属性（ data-order和data-year ）应用于目标元素。这些自定义属性的值取决于我们要实现的排序顺序。

两个项目HTML如下所示：

<li class="mix-target undergraduate" data-order="5" data-year="4">
   <a href="#">Economics<span>(U)</span></a>
</li>
<li class="mix-target graduate" data-order="14" data-year="2">
   <a href="#">Pharmacology<span>(G)</span></a>
</li>

此时，我们将<button>元素定义为单击处理程序，然后将sort-btn类和data-sort属性添加到每个元素中。此属性的值应使用以下约定：

<button data-sort="order:asc">

因此，我们具有用于排序的属性，然后，作为值具有订单类型，后跟冒号以及“ asc”或“ desc”指示符。

此属性还接受default关键字和random关键字作为值。另一个有趣的事情是，我们可以同时使用多个属性进行排序。

下面显示了我们示例中使用的两个排序按钮：

<button class="sort-btn" data-sort="order:asc">Ascending</button>
<button class="sort-btn" data-sort="year:desc order:desc">Descending <span class="multi">(Multi)</span></button>

首次加载MixItUp时，将触发属性为data-sort="default:asc"的按钮。也就是说，元素是根据其DOM外观进行排序的。类似于默认的筛选器按钮，此按钮接收一个活动类（ programs-sort-btn-active ）。

既然我们已经介绍了该库的基本功能，那么现在该看看如何初始化它了。

定制选项

为了在我们的演示中启用MixItUp 3的功能，我们使用mixitup工厂功能并将两个参数传递给它：

代表我们的容器的选择器
一个配置对象，该配置对象将覆盖MixItUp的默认行为。

这是代码：

mixitup('#mix-wrapper', {
  load: {
    sort: 'order:asc' /* default:asc */
  },
  animation: {
    effects: 'fade rotateZ(-180deg)', /* fade scale */
    duration: 700 /* 600 */
  },
  classNames: {
    block: 'programs', /* mixitup */
    elementFilter: 'filter-btn', /* control */
    elementSort: 'sort-btn' /* control */
  },
  selectors: {
    target: '.mix-target' /* .mix */
  }
});

让我们仔细看看我们的定制：

首先，当库加载时，我们更改默认的active排序按钮。
接下来，我们为目标元素标识不同的动画效果。
最后，我们将自定义类添加到目标元素，过滤器和排序按钮。因此，例如，当过滤器控件变为活动状态时，将添加programs-filter-btn-active mixitup-control-active programs-filter-btn-active类，而不是通用的默认mixitup-control-active类。

注意：原始默认值在注释中指示。

值得一提的是mixitup工厂函数返回一个MixItUp实例，我们可以使用其API方法对其进行操作。

您可以在完整的演示中查看此示例代码的实际操作，可以在下面的示例中进行尝试：

见笔MixItUp 3JavaScript库演示由SitePoint（ @SitePoint上） CodePen 。

结论

本文仅介绍使用MixItUp 3库的基础知识。我们可以讨论更多内容，包括MixItUp分页和MixItUp MultiFilter扩展。我希望至少该演示使您了解如何在即将到来的项目中使用它。

翻译自: https://www.sitepoint.com/animated-filtering-sorting-mixitup/

mixitup意思

dingshi7798

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
mixitup意思_使用MixItUp 3 JS库进行动画过滤和排序

mixitup意思过滤和排序网站的某些部分是组织内容的一种好方法。作品集，专辑和博客只是您可能要分类的一些示例。为此，许多JavaScript库都可以提供帮助。最受欢迎的两个是MixItUp和Isotope库。在本文中，我将介绍MixItUp 3（撰写本文时的最新版本）的基本功能，并向您展示在项目中利用它的所有步骤。为了更好地演示该库的工作原理，我还创建了一个demo ，我将在本文...
复制链接

扫一扫