关于排行榜代码优化
浏览:1373次 出处信息
目前比较常见的排行榜设计都习惯将靠前的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天十大热文
- [67] Oracle MTS模式下 进程地址与会话信
- [65] 如何拿下简短的域名
- [65] Go Reflect 性能
- [59] 图书馆的世界纪录
- [59] 【社会化设计】自我(self)部分――欢迎区
- [59] android 开发入门
- [58] IOS安全–浅谈关于IOS加固的几种方法
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 读书笔记-壹百度:百度十年千倍的29条法则
- [47] 界面设计速成