能不能给下源码
慕丝3836490
2017-05-28 21:45
为什么没有源码
2回答
-
- 傲娇_
- 2017-07-28 15:21:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星级评分--第一种实现方式</title>
<style>
body{
margin:0px;
padding:0px;
}
.rating{
margin: 100px auto;
text-align: center;
height: 32px;
width: 160px;
}
.rating-item{
list-style: none;
float: left;
width: 32px;
height: 32px;
cursor: pointer;
background: url(star.png) no-repeat;
}
</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>
<!--第二种实现方式-->
//更改图片地址即可
<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;
};
Light.prototype.init = function(){
this.lightOn(this.opts.num);
if(!this.opts.readOnly){
this.bindEvent();
}
};
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.bindEvent = function(){
var self = this,
itemLength = self.$item.length;
self.$el.on(self.selectEvent,'.rating-item',function(e){
var $this = $(this),
num = 0;
self.select(e,$this);
num = $(this).index()+self.add;
self.lightOn(num);
(typeof self.opts.select === 'function') && self.opts.select.call(this,num,itemLength);
self.$el.trigger('select',[num,itemLength]);
}).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,itemLength);
self.$el.trigger('chosen',[self.opts.num,itemLength]);
}).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';
};
extend(LightHalf,Light);
LightHalf.prototype.lightOn = function(num){
var count = parseInt(num);
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);
//new LightEntire(el,options).init();
//new LightHalf(el,options).init();
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").rating({
mode:'LightHalf',
num:2.5
});
$('#rating').on('chosen',function(){
$("#rating").rating('unbindEvent');
});
/*rating.init('#rating',{
mode:'LightHalf',
num:2.5,
chosen:function(){
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);
})*/
/* var rating = (function(){
//点亮
var lineOn = function($item,num){
$item.each(function(index){
if(index < num)
{
$(this).css('background-position','0 -32px');
}else{
$(this).css('background-position','0 0');
}
})
};
var init = function(el,num){
var $rating = $(el),
$item = $rating.find(".rating-item");
//初始化
lineOn($item,num);
//事件绑定
$rating.on('mouseover','.rating-item',function(){
lineOn($item,$(this).index()+1);
}).on('click','.rating-item',function(){
num = $(this).index()+1;
}).on('mouseout',function(){
lineOn($item,num);
});
};
//jQuery插件
$.fn.extend({
rating:function(num){
return this.each(function(){
init(this,num);
});
}
});
return {
init:init
};
})();
$rating.init('#rating',2);*/
</script>
</body>
</html> -
- 慕粉3398985
- 2017-05-29 10:19:27
法国岁的法国
星级评分原理和实现（上）
25809 学习 · 109 问题
相似问题