关于排行榜代码优化
浏览:1341次 出处信息
目前比较常见的排行榜设计都习惯将靠前的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天十大热文
- [697] Go Reflect 性能
- [24] 正态分布的前世今生(一)
- [16] rsync同步的艺术
- [15] Cuckoo Filter:设计与实现
- [13] 关于RDS只读实例延迟分析
- [13] Linux Used内存到底哪里去了?
- [13] 什么是DNS劫持和DNS污染?
- [12] Linux内存中的Cache真的能被回收么?
- [12] 公钥私钥加密解密数字证书数字签名详解
- [11] Android应用内多进程的使用及注意事项