jQuery Raty星级评分插件使用方法实例分析
本文实例讲述了jQueryRaty星级评分插件使用方法。分享给大家供大家参考，具体如下：
使用jQueryRaty，可以很方便的在页面上嵌入一个评分组件，如下所示：
使用方法很简单，首先从https://github.com/wbotelhos/raty下载raty的源代码（依赖于jquery）
然后在页面中引入相应的js文件、css文件、图片资源，在需要添加评分组件的元素上（比如span标签）添加下面的jquery代码即可：
$('span').raty();
以上为jQueryRaty的缺省使用方法，此外，该组件还支持丰富的传入参数和回调函数，例如：
设置jQueryRaty的初始评分：
评分回调函数
如果需要根据后台动态设置初始评分，可以使用回调函数实现。例如使用div中的data-attribute属性：
$('div').raty({
score:function(){
return$(this).attr('data-score');
}
});
还可以改变星星的个数：
$('div').raty({number:10});
只读模式：
$('div').raty({readOnly:true,score:3});
点击事件：
$('div').raty({
click:function(score,evt){
alert('ID:'+this.id+"\nscore:"+score+"\nevent:"+evt);
}
});
路径：
变更图标保存的位置，所有图标需要位于同一目录下，路径结尾的/不添加也可以
$('div').raty({
path:function(){
returnthis.getAttribute('data-path');
}
});
取消评分：
$('div').raty({cancel:true});
全局改变设置：
你可以全局更改上述提到的所有设置$.fn.raty.defaults.OPTION=VALUE;.该语句必须添加在插件绑定之前。
$.fn.raty.defaults.path=assets; $.fn.raty.defaults.cancel=true;
参数列表：
cancel:false//Createsacancelbuttontocanceltherating.
cancelClass:'raty-cancel'//Nameofcancel'sclass.
cancelHint:'Cancelthisrating!'//Thecancel'sbuttonhint.
cancelOff:'cancel-off.png'//Iconusedonactivecancel.
cancelOn:'cancel-on.png'//Iconusedinactivecancel.
cancelPlace:'left'//Cancel'sbuttonposition.
click:undefined//Callbackexecutedonratingclick.
half:false//Enableshalfstarselection.
halfShow:true//Enableshalfstardisplay.
hints:['bad','poor','regular','good','gorgeous']//Hintsusedoneachstar.
iconRange:undefined//Objectlistwithpositionandicononandofftodoamixedicons.
mouseout:undefined//Callbackexecutedonmouseout.
mouseover:undefined//Callbackexecutedonmouseover.
noRatedMsg:'Notratedyet!'//Hintfornoratedelementswhenit'sreadOnly.
number:5//Numberofstarsthatwillbepresented.
numberMax:20//Maxofstartheoptionnumbercancreates.
path:undefined//Agloballocatewheretheiconwillbelooked.
precision:false//Enablestheselectionofaprecisionscore.
readOnly:false//Turnstheratingread-only.
round:{down:.25,full:.6,up:.76}//Includedvaluesattributestodothescoreroundmath.
score:undefined//Initialrating.
scoreName:'score'//Nameofthehiddenfieldthatholdsthescorevalue.
single:false//Enablesjustasinglestarselection.
space:true//Putsspacebetweentheicons.
starHalf:'star-half.png'//Thenameofthehalfstarimage.
starOff:'star-off.png'//Nameofthestarimageoff.
starOn:'star-on.png'//Nameofthestarimageon.
target:undefined//Elementselectorwherethescorewillbedisplayed.
targetFormat:'{score}'//Templatetointerpolatethescorein.
targetKeep:false//Ifthelastratingvaluewillbekeepedaftermouseout.
targetScore:undefined//Elementselectorwherethescorewillbefilled,insteadofcreatinganewhiddenfield(scoreNameoption).
targetText:''//Defaulttextsettedontarget.
targetType:'hint'//Optiontochooseiftargetwillreceivehinto'score'type.
starType:'img'//Elementusedtorepresentastar.
回调函数列表：
$('div').raty('score');//Getthecurrentscore.
$('div').raty('score',number);//Setthescore.
$('div').raty('click',number);//Clickonsomestar.
$('div').raty('readOnly',boolean);//Changetheread-onlystate.
$('div').raty('cancel',boolean);//Canceltherating.Thelastparamforcetheclickcallback.
$('div').raty('reload');//Reloadtheratingwiththecurrentconfiguration.
$('div').raty('set',{option:value});//Resettheratingwithnewconfigurations.
$('div').raty('destroy');//Destroythebindandgiveyoutherawelement.
$('div').raty('move',number);//Movethemousetothegivenscorepointposition.
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。