Quicksand超漂亮的菜单排序效果

收藏

Quicksand能对页面上的元素进行重新排序及过滤，并且有很漂亮的洗牌过渡动画效果，可以放到你项目中提高用户体验。本文以实际项目应用来讲解Quicksand的使用。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

主菜单：

<div id="menus">
    <ul>
        <li id="all" class="cur">
            所有功能模块
        </li>
        <li id="app">
            应用程序
        </li>
        <li id="sys">
            系统管理
        </li>
    </ul>
</div>

对应的子菜单。注意：主菜单的li标签id对应子菜单的class

<ul id="list" class="image-grid">
    <li id="id-1" class="app">
        <img src="images/birth.gif" width="80" height="60" alt="" />
        <strong>
            生日祝福
        </strong>
    </li>
    <li id="id-2" class="app">
        <img src="images/festival.gif" width="80" height="60" alt="" />
        <strong>
            节日祝福
        </strong>
    </li>
    <li id="id-3" class="sys">
        <img src="images/jifen.gif" width="80" height="60" alt="" />
        <strong>
            积分管理
        </strong>
    </li>
    <li id="id-4" class="sys">
        <img src="images/member.gif" width="80" height="60" alt="" />
        <strong>
            会员管理
        </strong>
    </li>
    <li id="id-5" class="app">
        <img src="images/sms.gif" width="80" height="60" alt="" />
        <strong>
            短信发送
        </strong>
    </li>
    <li id="id-6" class="app">
        <img src="images/mms.gif" width="80" height="60" alt="" />
        <strong>
            彩信发送
        </strong>
    </li>
    <li id="id-7" class="app">
        <img src="images/plan.gif" width="80" height="60" alt="" />
        <strong>
            任务定制
        </strong>
    </li>
    <li id="id-8" class="app">
        <img src="images/survey.gif" width="80" height="60" alt="" />
        <strong>
            短信投票
        </strong>
    </li>
    <li id="id-9" class="sys">
        <img src="images/worker.gif" width="80" height="60" alt="" />
        <strong>
            员工管理
        </strong>
    </li>
    <li id="id-10" class="util">
        <img src="images/visit.gif" width="80" height="60" alt="" />
        <strong>
            客户回访
        </strong>
    </li>
</ul>

jQuery

首先复制列表区#list的内容:

var $data=$("#list").clone();

接着来实现选项卡风格，当点击导航时，给当前点击的项加上选中的样式，同时其他项移除选中状态的样式：

$("#menus ul li").click(function(){ 
    $(this).addClass("cur"); 
    $(this).siblings().removeClass("cur"); 
});

最后继续在单击时间里，获取当前点击选项的ID，通过判断ID值，获取数据源$source，最后调用quicksand插件。完整代码如下：

$(function() {
    var $data = $("#list").clone();
    $("#menus ul li").click(function() {
        $(this).addClass("cur");
        $(this).siblings().removeClass("cur");
        var id = $(this).attr("id");
        if (id == "all") {
            var $source = $data.find("li");
        } else {
            var $source = $data.find("li[class=" + id + "]");
        }
        $("#list").quicksand($source, {
            duration: 1000,
            attribute: 'id',
            easing: 'swing'
        });
    });
});

Quicksand相关参数：