当前位置:首页 > 开发 > Web前端 > Jquery > 正文

Jquery 评星效果Rating

发表于: 2015-02-04   作者:cool_i   来源:转载   浏览:
摘要: 实现功能: 同一页面可以使用多个评星,相互不干扰 星星数量可自定义 可设置默认的星级 在选择星级之后,仍有悬停效果 可自定义评星描述 rating.js代码: [javascript]  view plain copy print ? function InitStar(count,cur,s0,s1,ctn,txt){

实现功能:

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

rating.js代码:

[javascript]  view plain copy print ?
  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


页面代码:

[html]  view plain copy print ?
  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事件,在里面替换值即可

Jquery 评星效果Rating

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号