JQuery

1个成员

jQuery MixItUp插件实现列表过滤和排序

发表于 2017-01-13 3421 次查看
mixItUp 是一个可对列表项目进行过滤筛选和排序的 jQuery 插件,它使用了 CSS3 的变换(Transition)属性来实现筛选动画效果。此插件的定制性也比较高,可设置变换效果、速度等等。此外,它也提供了很优质的教学文档,极易入门。

如何使用

首先在页面头部中加入 jQuery 框架和 MixItUp 插件

 代码如下 复制代码

<script src="jquery.min.js"></script>
<script src="jquery.mixitup.min.js"></script>

要筛选排序的HTML代码如下,其中的data属性比较重要,各种控制都得靠它

 代码如下 复制代码

<ul id="Grid">
<li class="mix category_1" data-cat="1">1</li>
<li class="mix category_3" data-cat="3">3</li>
<li class="mix category_2" data-cat="2">2</li>
<li class="mix category_3" data-cat="3">3</li>
<li class="mix category_2" data-cat="2">2</li>
</ul>

要控制列表就要加上class为filter或sort,并设置对应的data-filter

 代码如下 复制代码

<a href="##" class="filter" data-filter="category_1">选择分类1</a>
<a href="##" class="sort" data-sort="data-cat" data-order="desc">排序</a>

最后按如下方式初始化

 代码如下 复制代码

$('#Grid').mixitup();

发表回复
你还没有登录,请先登录注册