当前位置:编程学习 > JS >>

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

如何使用

首先在页面头部中加入 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();

补充:网页制作,jquery 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,