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