`
cool_i
  • 浏览: 5175 次
  • 性别: Icon_minigender_1
  • 来自: 邯郸
最近访客 更多访客>>
qiufeiyu
社区版块
存档分类
最新评论

Jquery 评星效果Rating

星星评价 
阅读更多

实现功能：

  1. 同一页面可以使用多个评星，相互不干扰
  2. 星星数量可自定义
  3. 可设置默认的星级
  4. 在选择星级之后，仍有悬停效果
  5. 可自定义评星描述

rating.js代码：

[javascript] view plaincopyprint?
  1. function InitStar(count,cur,s0,s1,ctn,txt){  
  2.     for(var i=1;i<=count;i++){    
  3.         var p=(i<=cur)?s1:s0;   
  4.         $("<img/>").attr({"src":p,"flag":i}).css("cursor","pointer")  
  5.         .mouseover(function(){    
  6.             var cur=parseInt($(this).attr("flag"));  
  7.             $("#"+ctn).children().each(function(){    
  8.                 var i=parseInt($(this).attr("flag"));    
  9.                 var p=(i<=cur)?s1:s0;  
  10.                 $(this).attr("src",p);    
  11.             });    
  12.             showStar(txt,cur);    
  13.          }).click(function(){  //原文博客：blog.csdn.net/bluceyoung  
  14.             $("#"+ctn).attr("star",$(this).attr("flag"));    
  15.          }).appendTo($("#"+ctn));    
  16.     }     
  17.       
  18.     $("#"+ctn).attr("star",cur).mouseout(function(){    
  19.         var cur=parseInt($(this).attr("star"));    
  20.         $(this).children().each(function(){    
  21.             var p=($(this).attr("flag")<=cur)?s1:s0;    
  22.             $(this).attr("src",p);    
  23.         });    
  24.         showStar(txt,cur);    
  25.     });    
  26. }      
  27. function showStar(txt,cur){    
  28.     $("#"+txt).val(cur);    
  29.     $("#"+txt).change();    
  30. }    
参数说明：

count:星星总数
cur：默认选中第几颗
s0:空星星的图片路径
s1：实星星的图片路径
ctn：创建星星的容器
txt：显示评星描述的textbox

页面代码：

  1. <html>  
  2. <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript">  
  3. </script>  
  4. <script src="rating.js" type="text/javascript"></script>  
  5. <script type="text/javascript">  
  6.   
  7. $(document).ready(function(){  
  8. //创建星星  
  9. InitStar(5,3,'k.gif','s.gif','lblStar1','txt')  
  10. //重写评星描述  
  11.   $("#txt").change(function(){  
  12.     var v=$(this).val();  
  13.     switch(v){  
  14.         case "1":v="太差了";break;  
  15.         case "2":v="有待提高";break;  
  16.         case "3":v="一般";break;  
  17.         case "4":v="不错";break;  
  18.         case "5":v="太棒了";break;  
  19.         default:v="";  
  20.         }  
  21.         $(this).val(v);  
  22.   });  
  23. });  
  24.   
  25. </script>  
  26. <body>    
  27. <label id="lblStar1"></label><input type="text" id="txt">  
  28. <br>  
  29.   
  30. </body>    
  31. </html>  
默认在评星描述的textbox里显示的只是评星的等级数，若想自定义评级描述，则加一个change事件，在里面替换值即可
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics