用js+jquery以面向对象的方式写的星级评分插件
页面html 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>星级评分</title>
<style>
body,
ul,
li {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
.rating {
width: 160px;
height: 32px;
margin: 100px auto;
}
.rating-item {
float: left;
width: 32px;
height: 32px;
background: url(img/star.png) no-repeat;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="rating" id="rating">
<li class="rating-item" title="很不好"></li>
<li class="rating-item" title="不好"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="好"></li>
<li class="rating-item" title="很好"></li>
</ul>
<ul class="rating" id="rating2">
<li class="rating-item" title="很不好"></li>
<li class="rating-item" title="不好"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="好"></li>
<li class="rating-item" title="很好"></li>
</ul>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
var rating = (function() {
//继承
var extend = function(subClass, superClass) {
var F = function() {};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
}
//父类
var Light = function(el, options) {
this.$el = $(el);
this.$item = this.$el.find('.rating-item');
this.opts = options;
this.add = 1;
this.selectEvent = 'mouseover';
};
Light.prototype.init = function() {
this.lightOn(this.opts.num);
if(!this.opts.readOnly)
this.blindEvent();
};
Light.prototype.lightOn = function(num) {
num = parseInt(num);
this.$item.each(function(index) {
if(index < num) {
$(this).css('background-position', '0 -32px');
} else {
$(this).css('background-position', '0 0');
}
})
};
Light.prototype.blindEvent = function() {
var self = this,
itemLegth = self.$item.length;
self.$el.on(self.selectEvent, '.rating-item',
function(e) {
var num = 0;
var $this = $(this);
self.select(e, $this);
num = $(this).index() + self.add;
self.lightOn(num);
(typeof self.opts.select === 'function') && self.opts.select.call(this, self.opts.num, itemLegth);
self.$el.trigger('select', [num, itemLegth]);
}).on('click', '.rating-item', function() {
self.opts.num = $(this).index() + self.add;
(typeof self.opts.chosen === 'function') && self.opts.chosen.call(this, self.opts.num, itemLegth);
self.$el.trigger('chosen', [self.opts.num, itemLegth]);
}).on('mouseout', function() {
self.lightOn(self.opts.num);
});
};
Light.prototype.select = function() {
throw new Error('子类必须重写此方法')
}
Light.prototype.unbindEvent = function() {
this.$el.off();
}
//评分时点亮整颗星
var LightEntire = function(el, options) {
Light.call(this, el, options);
this.selectEvent = 'mouseover';
};
extend(LightEntire, Light);
LightEntire.prototype.lightOn = function(num) {
Light.prototype.lightOn.call(this, num);
};
LightEntire.prototype.select = function() {
self.add = 1;
}
//评分时点亮半颗
var LightHalf = function(el, options) {
Light.call(this, el, options);
this.selectEvent = 'mousemove';
//this.add = 0.5;
};
extend(LightHalf, Light);
LightHalf.prototype.lightOn = function(num) {
var count = parseInt(num);
var isHalf = count !== num;
Light.prototype.lightOn.call(this, count);
if(isHalf) {
this.$item.eq(count).css('background-position', '0 -64px');
}
};
LightHalf.prototype.select = function(e, $this) {
if(e.pageX - $this.offset().left < $this.width() / 2) { //半颗
this.add = 0.5;
} else { //整颗
this.add = 1;
}
}
//默认参数
var defaults = {
mode: 'LightEntire',
num: 0,
readOnly: false,
select: function() {},
chosen: function() {}
};
var mode = {
'LightEntire': LightEntire,
'LightHalf': LightHalf
}
//初始化
var init = function(el, option) {
var $el = $(el),
rating = $el.data('rating'),
options = $.extend({}, defaults, typeof option === 'object' && option);
if(!mode[options.mode]) {
options.mode = 'LightEntire'
}
if(!rating) {
$el.data('rating', (rating = new mode[options.mode](el, options)));
rating.init();
}
if(typeof option === 'string') rating[option]();
};
//写成jquery 插件
$.fn.extend({
rating: function(option) {
return this.each(function() {
init(this, option);
})
}
})
return {
init: init
}
})();
//非插件形式调用
//rating.init('#rating', {
//mode: 'LightHalf',
//num: 2.5,
// chosen: function(num, total) {
//rating.init('#rating','unbindEvent');
//}
//})
//$('#rating').on('select', function(e, num, total) {
//console.log(num + '/' + total);
//}).on('chosen', function(e, num, total) {
//console.log(num + '/' + total);
//})
//
//rating.init('#rating2', {
//mode: 'fdgdfsg',
//num: 3,
// chosen: function(num, total) {
//rating.init('#rating2','unbindEvent');
//}
//})
//插件形式调用
$('#rating').rating({
mode: 'LightHalf',
num: 3.5//3,5颗星
});
$('#rating2').rating({
mode: 'LightEntire',
num: 2 //两颗星
});
$('#rating2').on('chosen', function() {
$('#rating2').rating('unbindEvent')
});
</script>
</body>
</html>
