Quicksand超炫的页面排序及过滤效果

Quicksand是一款基于jQuery的插件,能对页面上的元素进行重新排序及过滤,并且有非常不错的洗牌过渡动画效果,可以应用在很多项目中来增强用户体验。本文以实际项目应用来讲解Quicksand的使用。

quicksand

 

HTML

<div?id="nav">?
???<ul>?
??????<li?id="all"?class="cur">所有功能模块</li>?
??????<li?id="app">应用程序</li>?
??????<li?id="sys">系统管理</li>?
???</ul>?
</div>?
<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>?
????....N多li?
</ul>?

XHTML结构由一个导航条和一个内容列表组成。在内容列表#list里,我给每个li都加了一个id属性,这个是为了方便Quicksand插件调用。

CSS

#nav{height:36px;?margin:10px?auto;?border-bottom:1px?solid?#36c}?
#nav?ul{list-style:none;?padding-left:120px}?
#nav?ul?li{float:left;?height:34px;?line-height:34px;?margin-left:6px;??
padding:0px?12px;?border-left:1px?solid?#d3d3d3;?border-right:1px?solid?#d3d3d3;??
?border-top:1px?solid?#d3d3d3;?background:#f7f7f7;?cursor:pointer}?
#nav?ul?li.cur{height:35px;?background:#36c;?color:#fff}?
.image-grid{zoom:1}?
.image-grid?li{width:?82px;?height:100px;?margin:?20px?0?0?35px;?float:left;?
?text-align:?center;?line-height:18px;color:?#686f74;overflow:hidden;}?
.image-grid?li?img,.image-grid?li?strong{display:block;}?

我给导航条#nav设置了选项卡风格,并设置选中状态#nav ul li.cur的样式。列表内容区也设置了每张图片的固定高度和宽度。

jQuery

首先,复制列表区的内容:

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

然后,来实现选项卡风格,当点击导航时,给当前点击的项加上选中的样式,同时其他项移除选中状态的样式:

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

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

$("#nav?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插件提供了几个参数可配置:

duration:过渡动画的时间,以毫秒为单位。

attribute:关联数据的属性,本例设置为id。

easing:动画缓冲方式。

还有一个方法enhancement:function(c) {}可以自定义函数调用。

顺便提一下,IE6下没有过渡动画效果,IE7+,以及其他高级浏览器均测试通过。

    

标签: