-
- 基于jQuery1.2.1 的Ajax Star Rating
- Weather:晴 西北风４－５级转西风４－５级 (2～6)℃
- 2007-11-30
以下内容为原创，欢迎转载、使用、以及优化修改，不过请保留作者信息
还是前阵子的项目，有一个评分系统，之前做的是一个select box+一个button，也是Ajax提交，但总感觉不太美观，于是想改成像豆瓣或是cnBeta那样的。网上找了一下，有一个是cnBeta那样的，但不是基于jQuery（那个项目用jQuery做的基础类库），只好放弃，于是仔细看了一下豆瓣的，豆瓣竟然是采用的jQuery，不错不错。研究了一小下午，搞定！主背景图是借用的jQuery官网的，提交图是刚才提到的前一个Rating的图。
HTML CODE：
CSS CODE：
#rating {clear:both;}
#rating span {cursor:hand;padding:0;display:block;float:left;height:15px;width:16px;background:transparent url(images/star.gif) center -1px no-repeat;}
#rating span.staroff {background:transparent url(images/star.gif) center -1px no-repeat;}
#rating span.staron {background:transparent url(images/star.gif) center -17px no-repeat;}
#rating span.starfocus {background:transparent url(images/star.gif) center -33px no-repeat;}JS CODE：
用到的图片：
现在的处理是提交后显示所提交的星数，如果要显示AJAX返回的星数，只需要在服务器端计算出1~5中的一个整数做为输出返回即可，将JS CODE的倒数第6行改成
success:function(result){postRate(result);}
即可。
由于本地环境不同，如果你想用的话，请适当修改CSS及图片等的路径以及Ajax提交的URL等参数，否则可能会看不出效果。
PS：别忘了在head区引入jQuery的基础类库。Enjoy it!
-
Views(5327) | Comments(5) |
In:
网页前端技术
|
(11/28)
马云的江湖-(转)
[基于jQuery1.2.1 的Ajax Star Rating]的回复
-
TRACY
于
2007-11-30 16:39:51
发表 |
IP:221.201.138.*
啊 写完了呀 这样啊 哦 明白了明白喽 我算算 我算算 还有22分种就下班了
你那个验证码好累眼睛啊
-
TRACY
于
2007-11-30 16:41:42
发表 |
IP:221.201.138.*
莫非我是色盲？？ 八可能 不可能
-
柠檬园主
于
2007-11-30 16:44:11
发表 |
IP:116.3.0.*
你不会点了再换个颜色深的呀。笨
- 4# TRACY 于 2007-11-30 19:38:16 发表 | IP:221.201.153.*
摆脱 我已经换了N个了好不
- 5# 柠檬园主 于 2007-12-01 00:04:37 发表 | IP:221.201.153.*
嗯,你都不容易看出来的话,那机器人更难识别出来而发SPAM啦...说明偶的验证码还是比较成功的.
