jquery评分插件jquery.raty js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery评分插件jquery.raty js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport">
<title>jquery评分插件jquery.raty </title>
<link type="text/css" rel="stylesheet" href="demo/css/application.css">
<script type="text/javascript" src="demo/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.raty.min.js"></script>
</head>
<body>
<div style="width:500px; margin:100px auto;">
  <div class="demo">
    <div id="function-demo" class="target-demo"></div>
    <div id="function-hint" class="hint"></div>
  </div>
  <div class="demo">
    <div id="function-demo1" class="target-demo"></div>
    <div id="function-hint1" class="hint"></div>
  </div>
</div>
<script type="text/javascript">
    $(function() {
      $.fn.raty.defaults.path = 'lib/img';
      $('#function-demo').raty({
	  	number: 3,//多少个星星设置		
		targetType: 'hint',//类型选择，number是数字值，hint，是设置的数组值
        path      : 'demo/img',
		hints     : ['差','一般','好'],
        cancelOff : 'cancel-off-big.png',
        cancelOn  : 'cancel-on-big.png',
        size      : 24,
        starHalf  : 'star-half-big.png',
        starOff   : 'star-off-big.png',
        starOn    : 'star-on-big.png',
        target    : '#function-hint',
        cancel    : false,
        targetKeep: true,
		targetText: '请选择评分',

        click: function(score, evt) {
          alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
        }
      });    
	  
	  $('#function-demo1').raty({
	  	number: 10,//多少个星星设置
		score: 2,//初始值是设置
		targetType: 'number',//类型选择，number是数字值，hint，是设置的数组值
        path      : 'demo/img',
        cancelOff : 'cancel-off-big.png',
        cancelOn  : 'cancel-on-big.png',
        size      : 24,
        starHalf  : 'star-half-big.png',
        starOff   : 'star-off-big.png',
        starOn    : 'star-on-big.png',
        target    : '#function-hint1',
        cancel    : false,
        targetKeep: true,
        precision : false,//是否包含小数
        click: function(score, evt) {
          alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
        }
      });    
    });
  </script>
</body>
</html>

JS代码(jquery.raty.min.js):

/*! * jQuery Raty - A Star Rating Plugin * * Licensed under The MIT License * * @version 2.5.2 * @author Washington Botelho * @documentation wbotelhos.com/raty * */
;
	(function(b){
	var a={
	init:function(c){
	return this.each(function(){
	a.destroy.call(this);
	this.opt=b.extend(true,{
}
,b.fn.raty.defaults,c);
	var e=b(this),g=["number","readOnly","score","scoreName"];
	a._callback.call(this,g);
	if(this.opt.precision){
	a._adjustPrecision.call(this);
}
this.opt.number=a._between(this.opt.number,0,this.opt.numberMax);
	this.opt.path=this.opt.path||"";
	if(this.opt.path&&this.opt.path.slice(this.opt.path.length-1,this.opt.path.length)!=="/"){
	this.opt.path+="/";
}
this.stars=a._createStars.call(this);
	this.score=a._createScore.call(this);
	a._apply.call(this,this.opt.score);
	var f=this.opt.space?4:0,d=this.opt.width||(this.opt.number*this.opt.size+this.opt.number*f);
	if(this.opt.cancel){
	this.cancel=a._createCancel.call(this);
	d+=(this.opt.size+f);
}
if(this.opt.readOnly){
	a._lock.call(this);
}
else{
	e.css("cursor","pointer");
	a._binds.call(this);
}
if(this.opt.width!==false){
	e.css("width",d);
}
a._target.call(this,this.opt.score);
	e.data({
	settings:this.opt,raty:true}
);
}
);
}
,_adjustPrecision:function(){
	this.opt.targetType="score";
	this.opt.half=true;
}
,_apply:function(c){
	if(c&&c>0){
	c=a._between(c,0,this.opt.number);
	this.score.val(c);
}
a._fill.call(this,c);
	if(c){
	a._roundStars.call(this,c);
}
}
,_between:function(e,d,c){
	return Math.min(Math.max(parseFloat(e),d),c);
}
,_binds:function(){
	if(this.cancel){
	a._bindCancel.call(this);
}
a._bindClick.call(this);
	a._bindOut.call(this);
	a._bindOver.call(this);
}
,_bindCancel:function(){
	a._bindClickCancel.call(this);
	a._bindOutCancel.call(this);
	a._bindOverCancel.call(this);
}
,_bindClick:function(){
	var c=this,d=b(c);
	c.stars.on("click.raty",function(e){
	c.score.val((c.opt.half||c.opt.precision)?d.data("score"):this.alt);
	if(c.opt.click){
	c.opt.click.call(c,parseFloat(c.score.val()),e);
}
}
);
}
,_bindClickCancel:function(){
	var c=this;
	c.cancel.on("click.raty",function(d){
	c.score.removeAttr("value");
	if(c.opt.click){
	c.opt.click.call(c,null,d);
}
}
);
}
,_bindOut:function(){
	var c=this;
	b(this).on("mouseleave.raty",function(d){
	var e=parseFloat(c.score.val())||undefined;
	a._apply.call(c,e);
	a._target.call(c,e,d);
	if(c.opt.mouseout){
	c.opt.mouseout.call(c,e,d);
}
}
);
}
,_bindOutCancel:function(){
	var c=this;
	c.cancel.on("mouseleave.raty",function(d){
	b(this).attr("src",c.opt.path+c.opt.cancelOff);
	if(c.opt.mouseout){
	c.opt.mouseout.call(c,c.score.val()||null,d);
}
}
);
}
,_bindOverCancel:function(){
	var c=this;
	c.cancel.on("mouseover.raty",function(d){
	b(this).attr("src",c.opt.path+c.opt.cancelOn);
	c.stars.attr("src",c.opt.path+c.opt.starOff);
	a._target.call(c,null,d);
	if(c.opt.mouseover){
	c.opt.mouseover.call(c,null);
}
}
);
}
,_bindOver:function(){
	var c=this,d=b(c),e=c.opt.half?"mousemove.raty":"mouseover.raty";
	c.stars.on(e,function(g){
	var h=parseInt(this.alt,10);
	if(c.opt.half){
	var f=parseFloat((g.pageX-b(this).offset().left)/c.opt.size),j=(f>0.5)?1:0.5;
	h=h-1+j;
	a._fill.call(c,h);
	if(c.opt.precision){
	h=h-j+f;
}
a._roundStars.call(c,h);
	d.data("score",h);
}
else{
	a._fill.call(c,h);
}
a._target.call(c,h,g);
	if(c.opt.mouseover){
	c.opt.mouseover.call(c,h,g);
}
}
);
}
,_callback:function(c){
	for(i in c){
	if(typeof this.opt[c[i]]==="function"){
	this.opt[c[i]]=this.opt[c[i]].call(this);
}
}
}
,_createCancel:function(){
	var e=b(this),c=this.opt.path+this.opt.cancelOff,d=b("<img />",{
	src:c,alt:"x",title:this.opt.cancelHint,"class":"raty-cancel"}
);
	if(this.opt.cancelPlace=="left"){
	e.prepend("&#160;
	").prepend(d);
}
else{
	e.append("&#160;
	").append(d);
}
return d;
}
,_createScore:function(){
	return b("<input />",{
	type:"hidden",name:this.opt.scoreName}
).appendTo(this);
}
,_createStars:function(){
	var e=b(this);
	for(var c=1;
	c<=this.opt.number;
	c++){
	var f=a._getHint.call(this,c),d=(this.opt.score&&this.opt.score>=c)?"starOn":"starOff";
	d=this.opt.path+this.opt[d];
	b("<img />",{
	src:d,alt:c,title:f}
).appendTo(this);
	if(this.opt.space){
	e.append((c<this.opt.number)?"&#160;
	":"");
}
}
return e.children("img");
}
,_error:function(c){
	b(this).html(c);
	b.error(c);
}
,_fill:function(d){
	var m=this,e=0;
	for(var f=1;
	f<=m.stars.length;
	f++){
	var g=m.stars.eq(f-1),l=m.opt.single?(f==d):(f<=d);
	if(m.opt.iconRange&&m.opt.iconRange.length>e){
	var j=m.opt.iconRange[e],h=j.on||m.opt.starOn,c=j.off||m.opt.starOff,k=l?h:c;
	if(f<=j.range){
	g.attr("src",m.opt.path+k);
}
if(f==j.range){
	e++;
}
}
else{
	var k=l?"starOn":"starOff";
	g.attr("src",this.opt.path+this.opt[k]);
}
}
}
,_getHint:function(d){
	var c=this.opt.hints[d-1];
	return(c==="")?"":(c||d);
}
,_lock:function(){
	var d=parseInt(this.score.val(),10),c=d?a._getHint.call(this,d):this.opt.noRatedMsg;
	b(this).data("readonly",true).css("cursor","").attr("title",c);
	this.score.attr("readonly","readonly");
	this.stars.attr("title",c);
	if(this.cancel){
	this.cancel.hide();
}
}
,_roundStars:function(e){
	var d=(e-Math.floor(e)).toFixed(2);
	if(d>this.opt.round.down){
	var c="starOn";
	if(this.opt.halfShow&&d<this.opt.round.up){
	c="starHalf";
}
else{
	if(d<this.opt.round.full){
	c="starOff";
}
}
this.stars.eq(Math.ceil(e)-1).attr("src",this.opt.path+this.opt[c]);
}
}
,_target:function(f,d){
	if(this.opt.target){
	var e=b(this.opt.target);
	if(e.length===0){
	a._error.call(this,"Target selector invalid or missing!");
}
if(this.opt.targetFormat.indexOf("{
	score}
")<0){
	a._error.call(this,'Template "{
	score}
" missing!');
}
var c=d&&d.type=="mouseover";
	if(f===undefined){
	f=this.opt.targetText;
}
else{
	if(f===null){
	f=c?this.opt.cancelHint:this.opt.targetText;
}
else{
	if(this.opt.targetType=="hint"){
	f=a._getHint.call(this,Math.ceil(f));
}
else{
	if(this.opt.precision){
	f=parseFloat(f).toFixed(1);
}
}
if(!c&&!this.opt.targetKeep){
	f=this.opt.targetText;
}
}
}
if(f){
	f=this.opt.targetFormat.toString().replace("{
	score}
",f);
}
if(e.is(":input")){
	e.val(f);
}
else{
	e.html(f);
}
}
}
,_unlock:function(){
	b(this).data("readonly",false).css("cursor","pointer").removeAttr("title");
	this.score.removeAttr("readonly","readonly");
	for(var c=0;
	c<this.opt.number;
	c++){
	this.stars.eq(c).attr("title",a._getHint.call(this,c+1));
}
if(this.cancel){
	this.cancel.css("display","");
}
}
,cancel:function(c){
	return this.each(function(){
	if(b(this).data("readonly")!==true){
	a[c?"click":"score"].call(this,null);
	this.score.removeAttr("value");
}
}
);
}
,click:function(c){
	return b(this).each(function(){
	if(b(this).data("readonly")!==true){
	a._apply.call(this,c);
	if(!this.opt.click){
	a._error.call(this,'You must add the "click:function(score,evt){
}
" callback.');
}
this.opt.click.call(this,c,{
	type:"click"}
);
	a._target.call(this,c);
}
}
);
}
,destroy:function(){
	return b(this).each(function(){
	var d=b(this),c=d.data("raw");
	if(c){
	d.off(".raty").empty().css({
	cursor:c.style.cursor,width:c.style.width}
).removeData("readonly");
}
else{
	d.data("raw",d.clone()[0]);
}
}
);
}
,getScore:function(){
	var d=[],c;
	b(this).each(function(){
	c=this.score.val();
	d.push(c?parseFloat(c):undefined);
}
);
	return(d.length>1)?d:d[0];
}
,readOnly:function(c){
	return this.each(function(){
	var d=b(this);
	if(d.data("readonly")!==c){
	if(c){
	d.off(".raty").children("img").off(".raty");
	a._lock.call(this);
}
else{
	a._binds.call(this);
	a._unlock.call(this);
}
d.data("readonly",c);
}
}
);
}
,reload:function(){
	return a.set.call(this,{
}
);
}
,score:function(){
	return arguments.length?a.setScore.apply(this,arguments):a.getScore.call(this);
}
,set:function(c){
	return this.each(function(){
	var e=b(this),f=e.data("settings"),d=b.extend({
}
,f,c);
	e.raty(d);
}
);
}
,setScore:function(c){
	return b(this).each(function(){
	if(b(this).data("readonly")!==true){
	a._apply.call(this,c);
	a._target.call(this,c);
}
}
);
}
}
;
	b.fn.raty=function(c){
	if(a[c]){
	return a[c].apply(this,Array.prototype.slice.call(arguments,1));
}
else{
	if(typeof c==="object"||!c){
	return a.init.apply(this,arguments);
}
else{
	b.error("Method "+c+" does not exist!");
}
}
}
;
	b.fn.raty.defaults={
	cancel:false,cancelHint:"Cancel this rating!",cancelOff:"cancel-off.png",cancelOn:"cancel-on.png",cancelPlace:"left",click:undefined,half:false,halfShow:true,hints:["bad","poor","regular","good","gorgeous"],iconRange:undefined,mouseout:undefined,mouseover:undefined,noRatedMsg:"Not rated yet!",number:5,numberMax:20,path:"",precision:false,readOnly:false,round:{
	down:0.25,full:0.6,up:0.76}
,score:undefined,scoreName:"score",single:false,size:16,space:true,starHalf:"star-half.png",starOff:"star-off.png",starOn:"star-on.png",target:undefined,targetFormat:"{
	score}
",targetKeep:false,targetText:"",targetType:"hint",width:undefined}
;
}
)(jQuery);

CSS代码(application.css):

@CHARSET 'UTF-8';@IMPORT url('normalize.css');@IMPORT url('common.css');@IMPORT url('pygments.css');@IMPORT url('font-awesome.css');@IMPORT url('demo.css');

CSS代码(demo.css):

.demo input,.demo textarea,.demo select{border:1px solid #999;border-radius:5px;color:#333;display:inline-block;height:27px;font-size:1.5em;text-align:center;width:135px;vertical-align:middle}
.demo input:focus,.demo textarea:focus,.demo select:focus{border:1px solid #95BDD4}
.demo input:hover,.demo textarea:hover,.demo select:hover{border:1px solid #BDBDBD}
.demo textarea{resize:none;height:27px}
.demo select{text-align:left}
.demo .target-demo{display:inline-block;vertical-align:middle}
.demo div.hint{background-color:#F8F8F8;border-radius:5px;color:#333;display:inline-block;height:27px;font-size:1.5em;text-align:center;width:135px;vertical-align:middle}
.demo label{color:#444;font-size:1.7em;letter-spacing:.7px;margin-right:5px;padding-left:6px;vertical-align:middle}
.demo a.run{font-size:1.5em;margin-left:5px;letter-spacing:.7px;vertical-align:middle}

附件:下载该文件资源,减少时间成本(增值服务)