jQuery星星评分插件 js代码

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

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

以下是 jQuery星星评分插件 js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gb2312"/>
    <title>jQuery�������ֲ��</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>

    <link href="css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="js/star-rating.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<form>
    <input id="input-2b" type="number" class="rating" min="0" max="5" step="0.5" data-size="xl"
    data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}">
    <br>
    <input id="input-21a" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xl" >
    <br>
    <input id="input-21b" value="4" type="number" class="rating" min=0 max=5 step=0.2 data-size="lg">
    <br>
    <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">
    <br>
    <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">
    <br>
    <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >
    <br>
    <input id="input-21f" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="md" >
    <br>
    <input id="input-2ba" type="number" class="rating" min="0" max="5" step="0.5" data-stars=5
    data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}">
    <br>
    <input id="input-22"  value="0" type="number" class="rating" min=0 max=5 step=0.5 data-rtl=1 data-container-class='text-right' data-glyphicon=0>
    <div class="clearfix"></div>
    <div class="form-group">
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-default">Reset</button>
    </div>
</form>
<br>
<script>
    jQuery(document).ready(function () {
        $(".rating-kv").rating();
    });
</script>
</div>  
</body>
</html>

JS代码(star-rating.min.js):

/*! * @copyright &copy;
	Kartik Visweswaran,Krajee.com,2014 * @version 2.5.0 * * A simple yet powerful JQuery star rating plugin that allows rendering * fractional star ratings and supports Right to Left (RTL) input. * * For more JQuery plugins visit http://plugins.krajee.com * For more Yii related demos visit http://demos.krajee.com */
!function(t){
	var e=0,a=5,n=.5,r=function(e,a){
	return"undefined"==typeof e||null===e||void 0===e||e==[]||""===e||a&&""===t.trim(e)}
,l=function(t,e,a){
	var n=r(t.data(e))?t.attr(e):t.data(e);
	return n?n:a[e]}
,i=function(t){
	var e=(""+t).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
	return e?Math.max(0,(e[1]?e[1].length:0)-(e[2]?+e[2]:0)):0}
,s=function(t,e){
	return parseFloat(t.toFixed(e))}
,o=function(e,a){
	this.$element=t(e),this.init(a)}
;
	o.prototype={
	constructor:o,_parseAttr:function(t,i){
	var s=this,o=s.$element;
	if("range"===o.attr("type")||"number"===o.attr("type")){
	var c=l(o,t,i),p=n;
	"min"===t?p=e:"max"===t?p=a:"step"===t&&(p=n);
	var u=r(c)?p:c;
	return parseFloat(u)}
return parseFloat(i[t])}
,listen:function(){
	var e=this;
	e.$rating.on("click",function(t){
	e.inactive||(w=t.pageX-e.$rating.offset().left,e.setStars(w),e.$element.trigger("change"),e.$element.trigger("rating.change",[e.$element.val(),e.$caption.html()]))}
),e.$clear.on("click",function(){
	e.inactive||e.clear()}
),t(e.$element[0].form).on("reset",function(){
	e.inactive||e.reset()}
)}
,initSlider:function(t){
	var l=this;
	r(l.$element.val())&&l.$element.val(0),l.initialValue=l.$element.val(),l.min="undefined"!=typeof t.min?t.min:l._parseAttr("min",t),l.max="undefined"!=typeof t.max?t.max:l._parseAttr("max",t),l.step="undefined"!=typeof t.step?t.step:l._parseAttr("step",t),(isNaN(l.min)||r(l.min))&&(l.min=e),(isNaN(l.max)||r(l.max))&&(l.max=a),(isNaN(l.step)||r(l.step)||0==l.step)&&(l.step=n),l.diff=l.max-l.min}
,init:function(e){
	var a=this;
	a.options=e,a.initSlider(e),a.checkDisabled(),$element=a.$element,a.containerClass=e.containerClass,a.glyphicon=e.glyphicon;
	var n=a.glyphicon?"":"★";
	a.symbol=r(e.symbol)?n:e.symbol,a.rtl=e.rtl||a.$element.attr("dir"),a.rtl&&a.$element.attr("dir","rtl"),a.showClear=e.showClear,a.showCaption=e.showCaption,a.size=e.size,a.stars=e.stars,a.defaultCaption=e.defaultCaption,a.starCaptions=e.starCaptions,a.starCaptionClasses=e.starCaptionClasses,a.clearButton=e.clearButton,a.clearButtonTitle=e.clearButtonTitle,a.clearButtonBaseClass=r(e.clearButtonBaseClass)?"clear-rating":e.clearButtonBaseClass,a.clearButtonActiveClass=r(e.clearButtonActiveClass)?"clear-rating-active":e.clearButtonActiveClass,a.clearCaption=e.clearCaption,a.clearCaptionClass=e.clearCaptionClass,a.clearValue=e.clearValue,a.$element.removeClass("form-control").addClass("form-control"),a.$clearElement=r(e.clearElement)?null:t(e.clearElement),a.$captionElement=r(e.captionElement)?null:t(e.captionElement),"undefined"==typeof a.$rating&&"undefined"==typeof a.$container&&(a.$rating=t(document.createElement("div")).html('<div class="rating-stars"></div>'),a.$container=t(document.createElement("div")),a.$container.before(a.$rating),a.$container.append(a.$rating),a.$element.before(a.$container).appendTo(a.$rating)),a.$stars=a.$rating.find(".rating-stars"),a.generateRating(),a.$clear=r(a.$clearElement)?a.$container.find("."+a.clearButtonBaseClass):a.$clearElement,a.$caption=r(a.$captionElement)?a.$container.find(".caption"):a.$captionElement,a.setStars(),a.$element.hide(),a.listen(),a.showClear&&a.$clear.attr({
	"class":a.getClearClass()}
)}
,checkDisabled:function(){
	var t=this;
	t.disabled=l(t.$element,"disabled",t.options),t.readonly=l(t.$element,"readonly",t.options),t.inactive=t.disabled||t.readonly}
,getClearClass:function(){
	return this.clearButtonBaseClass+" "+(this.inactive?"":this.clearButtonActiveClass)}
,generateRating:function(){
	var t=this,e=t.renderClear(),a=t.renderCaption(),n=t.rtl?"rating-container-rtl":"rating-container",l=t.getStars();
	n+=t.glyphicon?""==t.symbol?" rating-gly-star":" rating-gly":" rating-uni",t.$rating.attr("class",n),t.$rating.attr("data-content",l),t.$stars.attr("data-content",l);
	var n=t.rtl?"star-rating-rtl":"star-rating";
	t.$container.attr("class",n+" rating-"+t.size),t.inactive?t.$container.removeClass("rating-active").addClass("rating-disabled"):t.$container.removeClass("rating-disabled").addClass("rating-active"),"undefined"==typeof t.$caption&&"undefined"==typeof t.$clear&&(t.rtl?t.$container.prepend(a).append(e):t.$container.prepend(e).append(a)),r(t.containerClass)||t.$container.removeClass(t.containerClass).addClass(t.containerClass)}
,getStars:function(){
	for(var t=this,e=t.stars,a="",n=1;
	e>=n;
	n++)a+=t.symbol;
	return a}
,renderClear:function(){
	var t=this;
	if(!t.showClear)return"";
	var e=t.getClearClass();
	return r(t.$clearElement)?'<div class="'+e+'" title="'+t.clearButtonTitle+'">'+t.clearButton+"</div>":(t.$clearElement.removeClass(e).addClass(e).attr({
	title:t.clearButtonTitle}
),t.$clearElement.html(t.clearButton),"")}
,renderCaption:function(){
	var t=this,e=t.$element.val();
	if(!t.showCaption)return"";
	var a=t.fetchCaption(e);
	return r(t.$captionElement)?'<div class="caption">'+a+"</div>":(t.$captionElement.removeClass("caption").addClass("caption").attr({
	title:t.clearCaption}
),t.$captionElement.html(a),"")}
,fetchCaption:function(t){
	var e=this,a=parseFloat(t),n=r(e.starCaptionClasses[a])?e.clearCaptionClass:e.starCaptionClasses[a],l=r(e.starCaptions[a])?e.defaultCaption.replace(/\{
	rating\}
/g,a):e.starCaptions[a],i=a==e.clearValue?e.clearCaption:l;
	return'<span class="'+n+'">'+i+"</span>"}
,getValueFromPosition:function(t){
	var e,a,n=this,r=i(n.step),l=n.$rating.width();
	return e=t/l,a=n.min+Math.ceil(n.diff*e/n.step)*n.step,a<n.min?a=n.min:a>n.max&&(a=n.max),a=s(parseFloat(a),r),n.rtl&&(a=n.max-a),a}
,setStars:function(t){
	var e=this,a=e.min,n=e.max,l=(e.step,arguments.length?e.getValueFromPosition(t):r(e.$element.val())?0:e.$element.val()),i=0,s=(e.$rating.width(),e.fetchCaption(l));
	i=(l-a)/n*100,e.rtl&&(i=100-i),e.$element.val(l),i+="%",e.$stars.css("width",i),e.$caption.html(s)}
,clear:function(){
	var t=this,e='<span class="'+t.clearCaptionClass+'">'+t.clearCaption+"</span>";
	t.$stars.removeClass("rated"),t.inactive||t.$caption.html(e),t.$element.val(t.clearValue),t.setStars(),t.$element.trigger("rating.clear")}
,reset:function(){
	var t=this;
	t.$element.val(t.initialValue),t.setStars(),t.$element.trigger("rating.reset")}
,update:function(t){
	if(arguments.length>0){
	var e=this;
	e.$element.val(t),e.setStars()}
}
,refresh:function(e){
	var a=this;
	if(arguments.length){
	a.init(t.extend(a.options,e)),a.showClear?a.$clear.show():a.$clear.hide(),a.showCaption?a.$caption.show():a.$caption.hide()}
}
}
,t.fn.rating=function(e){
	var a=Array.apply(null,arguments);
	return a.shift(),this.each(function(){
	var n=t(this),r=n.data("rating"),l="object"==typeof e&&e;
	r||n.data("rating",r=new o(this,t.extend({
}
,t.fn.rating.defaults,l,t(this).data()))),"string"==typeof e&&r[e].apply(r,a)}
)}
,t.fn.rating.defaults={
	stars:5,glyphicon:!0,symbol:null,disabled:!1,readonly:!1,rtl:!1,size:"md",showClear:!0,showCaption:!0,defaultCaption:"{
	rating}
Stars",starCaptions:{
	.5:"Half Star",1:"One Star",1.5:"One & Half Star",2:"Two Stars",2.5:"Two & Half Stars",3:"Three Stars",3.5:"Three & Half Stars",4:"Four Stars",4.5:"Four & Half Stars",5:"Five Stars"}
,starCaptionClasses:{
	.5:"label label-danger",1:"label label-danger",1.5:"label label-warning",2:"label label-warning",2.5:"label label-info",3:"label label-info",3.5:"label label-primary",4:"label label-primary",4.5:"label label-success",5:"label label-success"}
,clearButton:'<i class="glyphicon glyphicon-minus-sign"></i>',clearButtonTitle:"Clear",clearButtonBaseClass:"clear-rating",clearButtonActiveClass:"clear-rating-active",clearCaption:"Not Rated",clearCaptionClass:"label label-default",clearValue:0,captionElement:null,clearElement:null,containerClass:null}
,t(document).ready(function(){
	var e=t("input.rating"),a=Object.keys(e).length;
	a>0&&e.rating()}
)}
(jQuery);

CSS代码(star-rating.min.css):

/*! * @copyright &copy;Kartik Visweswaran,Krajee.com,2014 * @version 2.5.0 * * A simple yet powerful JQuery star rating plugin that allows rendering * fractional star ratings and supports Right to Left (RTL) input. * * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com * For more Yii related demos visit http://demos.krajee.com */
.rating-gly{font-family:'Glyphicons Halflings'}
.rating-gly-star{font-family:'Glyphicons Halflings';padding-left:2px}
.rating-gly-star .rating-stars:before{padding-left:2px}
.rating-lg .rating-gly-star,.rating-lg .rating-gly-star .rating-stars:before{padding-left:4px}
.rating-xl .rating-gly-star,.rating-xl .rating-gly-star .rating-stars:before{padding-left:2px}
.rating-active{cursor:default}
.rating-disabled{cursor:not-allowed}
.rating-uni{font-size:1.2em;margin-top:-5px}
.rating-container{position:relative;vertical-align:middle;display:inline-block;color:#e3e3e3;overflow:hidden}
.rating-container:before{content:attr(data-content)}
.rating-container .rating-stars{position:absolute;left:0;top:0;white-space:nowrap;overflow:hidden;color:#fde16d;transition:all .25s ease-out;-o-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-webkit-transition:all .25s ease-out}
.rating-container .rating-stars:before{content:attr(data-content);text-shadow:0 0 1px rgba(0,0,0,.7)}
.rating-container-rtl{position:relative;vertical-align:middle;display:inline-block;overflow:hidden;color:#fde16d}
.rating-container-rtl:before{content:attr(data-content);text-shadow:0 0 1px rgba(0,0,0,.7)}
.rating-container-rtl .rating-stars{position:absolute;left:0;top:0;white-space:nowrap;overflow:hidden;color:#e3e3e3;transition:all .25s ease-out;-o-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-webkit-transition:all .25s ease-out}
.rating-container-rtl .rating-stars:before{content:attr(data-content)}
.rating-xl{font-size:4.89em}
.rating-lg{font-size:3.91em}
.rating-md{font-size:3.13em}
.rating-sm{font-size:2.5em}
.rating-xs{font-size:2em}
.star-rating .clear-rating,.star-rating-rtl .clear-rating{color:#aaa;cursor:not-allowed;display:inline-block;vertical-align:middle;font-size:60%}
.clear-rating-active{cursor:pointer!important}
.clear-rating-active:hover{color:#843534}
.star-rating .clear-rating{padding-right:5px}
.star-rating .caption,.star-rating-rtl .caption{color:#999;display:inline-block;vertical-align:middle;font-size:55%}
.star-rating .caption{padding-left:5px}
.star-rating-rtl .caption{padding-right:5px}

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