77家的会客2010

基于jQuery1.2.1 的Ajax Star Rating
Weather:晴 西北风4-5级转西风4-5级 (2~6)℃

以下内容为原创,欢迎转载、使用、以及优化修改,不过请保留作者信息

还是前阵子的项目,有一个评分系统,之前做的是一个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!

[基于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啦...说明偶的验证码还是比较成功的.

Post a Comment~