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;
}
![](https://i-blog.csdnimg.cn/blog_migrate/96862f6b84cb449073c181a2f392f1a7.png)
免费学习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意思