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

来源:互联网 时间:1970-01-01

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();


相关阅读:
Top