关于排行榜代码优化
浏览:1336次 出处信息
目前比较常见的排行榜设计都习惯将靠前的TOP3与其他七项有所区别,主要是序号的背景或者文字的颜色有所区别,如图
这种排行榜实现按以前的思维,习惯在for循环输出对大于0小于3的输出一种格式,其他几项采用另外一种格式,代码如下:
- $velocityCount$til
- $velocityCount$til
#set($list=$tag.getList(“topicid=00853R2J;listnum=10;titlelength=20;pointstart=60;pointend=80;”))
#if ($list)
#foreach ($one in $list)
#set ($til=${tools.replaceAll([标题],”\””,”"”)})
#if($velocityCount<4)
#end
#if($velocityCount>4 && $velocityCount<10)
#end
#end#end
其实单从后台语言输出来看确实觉得优化空间比较小,所以换一个从css的角度进行优化。
我们可以将序号的css背景先整合在一张sprite,用于ul 的背景图,这样根据ul里li的数量增加ul的背景也能相应的显示出来,而且后台输出代码也能简化逻辑,不需要再做逻辑判断只要输出li就可以。代码如下:
- $til
#set($list=$tag.getList(“topicid=00853R2J;listnum=10;titlelength=20;pointstart=60;pointend=80;”))
#if ($list)
#foreach ($one in $list)
#set ($til=${tools.replaceAll([标题],”\””,”"”)})
#end#end
sprite如图所示:
注释:后台使用的是velocity java的模板引擎。
建议继续学习:
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:实现一个更精简的Tab
后一篇:电子商务网站“用户评论”模块浅析 >>
文章信息
- 作者:robot 来源: UED TEAM
- 标签: 排行榜
- 发布时间:2010-07-02 09:31:20
建议继续学习
近3天十大热文
- [478] 招聘技巧一二
- [18] 可用性测试好助手——Morae软件的应用
- [17] linux内核研究笔记(一)内存管理 – p
- [15] 再谈“我是怎么招聘程序员的”
- [15] 从数据中了解用户——数据在现有产品改版设计中
- [15] 配合jquery实现异步加载页面元素
- [15] 在ssh服务里使用chroot
- [15] 豆瓣是啥?
- [14] 密度聚类算法之OPTICS
- [13] 从数据中了解用户——数据在新产品设计中的应用