Jquery 评星效果Rating -

cool_i

浏览: 5513 次
性别:
来自: 邯郸

最近访客更多访客>>

qiufeiyu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2015-02 ( 7)
更多存档...

Jquery 评星效果Rating

博客分类：

jquery

星星评价

实现功能：

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

rating.js代码：

[javascript] view plaincopyprint?
function InitStar(count,cur,s0,s1,ctn,txt){  
    for(var i=1;i<=count;i++){    
        var p=(i<=cur)?s1:s0;   
        $("<img/>").attr({"src":p,"flag":i}).css("cursor","pointer")  
        .mouseover(function(){    
            var cur=parseInt($(this).attr("flag"));  
            $("#"+ctn).children().each(function(){    
                var i=parseInt($(this).attr("flag"));    
                var p=(i<=cur)?s1:s0;  
                $(this).attr("src",p);    
            });    
            showStar(txt,cur);    
         }).click(function(){  //原文博客：blog.csdn.net/bluceyoung  
            $("#"+ctn).attr("star",$(this).attr("flag"));    
         }).appendTo($("#"+ctn));    
    }     
      
    $("#"+ctn).attr("star",cur).mouseout(function(){    
        var cur=parseInt($(this).attr("star"));    
        $(this).children().each(function(){    
            var p=($(this).attr("flag")<=cur)?s1:s0;    
            $(this).attr("src",p);    
        });    
        showStar(txt,cur);    
    });    
}      
function showStar(txt,cur){    
    $("#"+txt).val(cur);    
    $("#"+txt).change();    
}    

参数说明：

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

页面代码：

[html] view plaincopyprint?
<html>  
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript">  
</script>  
<script src="rating.js" type="text/javascript"></script>  
<script type="text/javascript">  
  
$(document).ready(function(){  
//创建星星  
InitStar(5,3,'k.gif','s.gif','lblStar1','txt')  
//重写评星描述  
  $("#txt").change(function(){  
    var v=$(this).val();  
    switch(v){  
        case "1":v="太差了";break;  
        case "2":v="有待提高";break;  
        case "3":v="一般";break;  
        case "4":v="不错";break;  
        case "5":v="太棒了";break;  
        default:v="";  
        }  
        $(this).val(v);  
  });  
});  
  
</script>  
<body>    
<label id="lblStar1"></label><input type="text" id="txt">  
<br>  
  
</body>    
</html>  

默认在评星描述的textbox里显示的只是评星的等级数，若想自定义评级描述，则加一个change事件，在里面替换值即可

分享到：

红米note线刷

2015-02-04 11:11
浏览 1191
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery 评星效果Rating

rating.js代码：

页面代码：

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery 评星效果Rating

rating.js代码：

页面代码：

评论

发表评论

相关推荐

最近访客更多访客>>