The front has a native JS to achieve the star rating. Perhaps the coverage is not very broad, now give a jquery implementation of the star rating.
/**
* JQ Scoring effect
*/
function Score (options) {
This.config = {
Selector: '. Star ',//grading container
Rendercallback:null,//Render page after callback
Callback:null//Click Score Callback
};
This.cache = {
AMSG: [
"Very dissatisfied | Too far, and the seller described the serious discrepancy, very unhappy",
"Dissatisfied with | partial breakage, inconsistent with seller's description, dissatisfied",
"General | Quality general, no seller described so well",
"Satisfied | The quality is good, and the seller described the Basic Agreement, or quite satisfied",
"Very satisfied | The quality is very good, and the seller described the exact same, very satisfied"
],
istar:0,
iscore:0
};
This.init (options);
}
Score.prototype = {
Constructor:score,
Init:function (options) {
This.config = $.extend (This.config,options | | {});
var self = this,
_config = Self.config,
_cache = Self.cache;
Self._renderhtml ();
},
_renderhtml:function () {
var self = this,
_config = Self.config;
var html = ' <span class= ' desc ' ></span> ' +
' <p class= ' star-p hidden ' ></p> ';
$ (_config.selector). each (function (Index,item) {
$ (item). append (HTML);
$ (item). Wrap ($ (' <div class= "parentcls" style= "position:relative" ></div> "));
var parentcls = $ (item). closest ('. Parentcls ');
Self._bindenv (PARENTCLS);
_config.rendercallback && $.isfunction (_config.rendercallback) && _config.rendercallback ();
});
},
_bindenv:function (PARENTCLS) {
var self = this,
_config = Self.config,
_cache = Self.cache;
$ (_config.selector + ' Li ', parentcls). Each (function (Index,item) {
Move mouse over
$ (item). mouseover (function (e) {
var offsetleft = $ (' ul ', parentcls) [0].offsetleft;
Ismax (index + 1);
$ (' P ', parentcls). Hasclass (' hidden ') && $ (' P ', parentcls). Removeclass (' hidden ');
$ (' P ', parentcls). css ({' Left ': index*$ (This). Width () + + ' px '});
var html = ' <em> ' +
' <b> ' +index+ ' </b> min ' +_cache.amsg[index].split (' | ') [0]+ ' +
' </em> ' + _cache.amsg[index].split (' | ') [1];
$ (' P ', parentcls). HTML (HTML);
});
Mouse move out
$ (item). mouseout (function () {
Ismax ();
!$ (' P ', parentcls). Hasclass (' hidden ') && $ (' P ', parentcls). addclass (' hidden ');
});
Mouse click
$ (item). Click (function (e) {
var index = $ (_config.selector + ' Li ', parentcls). Index ($ (this));
_cache.istar = index + 1;
!$ (' P ', parentcls). Hasclass (' hidden ') && $ (' P ', parentcls). addclass (' hidden ');
var html = ' <strong> ' +
Index +
' Min </strong> ' +_cache.amsg[index].split (' | ') [1];
$ ('. Desc ', parentcls). HTML (HTML);
_config.callback && $.isfunction (_config.callback) && _config.callback ({staramount:_cache.istar});
});
});
function Ismax (iarg) {
_cache.iscore = Iarg | | _cache.istar;
var lis = $ (_config.selector + ' Li ', parentcls);
for (var i = 0; i < lis.length; i++) {
Lis[i].classname = i < _cache.iscore? "On": "";
}
}
}
};
The use of the method is super simple, here is no more nonsense, small partners take free play it.
