Quicksand超炫的页面排序及过滤效果
2011-07-07 09:28
871 查看
Quicksand是一款基于jQuery的插件,能对页面上的元素进行重新排序及过滤,并且有非常不错的洗牌过渡动画效果,可以应用在很多项目中来增强用户体验。本文以实际项目应用来讲解Quicksand的使用。
查看演示 下载源码
HTML
XHTML结构由一个导航条和一个内容列表组成。在内容列表#list里,我给每个li都加了一个id属性,这个是为了方便Quicksand插件调用。
CSS
我给导航条#nav设置了选项卡风格,并设置选中状态#nav ul li.cur的样式。列表内容区也设置了每张图片的固定高度和宽度。
jQuery
首先,复制列表区的内容:
然后,来实现选项卡风格,当点击导航时,给当前点击的项加上选中的样式,同时其他项移除选中状态的样式:
接着,继续在单击时间里,获取当前点击选项的ID,通过判断ID值,获取数据源$source,最后调用quicksand插件。完整的代码如下:
Quicksand插件提供了几个参数可配置:
duration:过渡动画的时间,以毫秒为单位。
attribute:关联数据的属性,本例设置为id。
easing:动画缓冲方式。
还有一个方法enhancement:function(c) {}可以自定义函数调用。
顺便提一下,IE6下没有过渡动画效果,IE7+,以及其他高级浏览器均测试通过。
查看演示 下载源码
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+,以及其他高级浏览器均测试通过。
相关文章推荐
- 太赞了!超炫的页面切换动画效果【附源码下载】
- 超炫ViewPager实现欢迎页面动画效果-IT蓝豹
- JQuery插件Quicksand实现超炫的动画洗牌效果
- 一个简单的响应组合页面过滤和悬停效果
- ScrollMagic – 酷毙了!超炫的页面滚动交互效果
- 超炫的 CSS3 页面切换动画效果
- Android 仿联系人列表 实现ListView的A-Z字母排序和过滤搜索功能,并挤压效果(一)
- 赞!超炫的页面切换动画效果【附源码下载】
- JQuery插件Quicksand实现超炫的动画洗牌效果
- 太赞了!超炫的页面切换动画效果【附源码下载】
- 太赞了!超炫的页面切换动画效果【附源码下载】
- 1. AngularJS+路由+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息(路由显示添加页面)
- 太赞了!超炫的页面切换动画效果【附源码下载】
- MixItUp:超炫!基于 CSS3 & jQuery 的过滤和排序插件
- Android 仿联系人列表 实现ListView的A-Z字母排序和过滤搜索功能,并挤压效果
- YbSoftwareFactory 代码生成插件【五】:具有超炫界面效果的WPF完整解决方案的代码生成插件
- Android ListView的A-Z字母排序和过滤搜索功能
- JS实现同页面,点击切换效果
- javaScript实现HTML页面分屏滚动效果
- js实现瀑布流排序加载效果