This commit is contained in:
star1029 2018-04-25 22:48:22 +08:00
parent 5a27ef86a6
commit fd86bdb0d4
2 changed files with 56 additions and 45 deletions

View File

@ -66,7 +66,7 @@ layui.use(['rate'], function(){
rate.render({
elem: '#test1'
,length: 7
,value: 4
,value: 4.2
})
rate.render({
@ -85,7 +85,7 @@ layui.use(['rate'], function(){
rate.render({
elem: '#test4'
,length: 8
,value: 5
,value: 4.7
,reader: true
})

View File

@ -39,7 +39,7 @@ layui.define('jquery',function(exports){
}
//字符常量
,MOD_NAME= 'rate', ICON_RATE = 'layui-icon layui-icon-rate', ICON_RATE_SOLID = 'layui-icon layui-icon-rate-solid', ICON_RATE_HALF = 'layui-icon layui-icon-rate-half'
,MOD_NAME = 'rate', ICON_RATE = 'layui-icon layui-icon-rate', ICON_RATE_SOLID = 'layui-icon layui-icon-rate-solid', ICON_RATE_HALF = 'layui-icon layui-icon-rate-half'
//构造器
@ -56,7 +56,7 @@ layui.define('jquery',function(exports){
text: false, //是否显示评分等级
reader: false, //是否只读
half: false, //是否可以半星
value: 5, //星星选中个数
value: 3 //星星选中个数
};
//评分渲染
@ -64,71 +64,80 @@ layui.define('jquery',function(exports){
var that = this
,options = that.config;
var temp='<ul class="layui-rate">';
for(var i=1;i<=options.length;i++){
if(options.half){
if(parseInt(options.value)!==options.value){
if(i==Math.ceil(options.value)){
temp=temp+'<li class="layui-inline"><i class="layui-icon layui-icon-rate-half"></i></li>';
}else{
temp=temp+'<li class="layui-inline"><i class="layui-icon '+(i>Math.floor(options.value)?'layui-icon-rate':'layui-icon-rate-solid')+'"></i></li>';
}
}else{
temp=temp+'<li class="layui-inline"><i class="layui-icon '+(i>Math.floor(options.value)?'layui-icon-rate':'layui-icon-rate-solid')+'"></i></li>';
}
}else{
temp=temp+'<li class="layui-inline"><i class="layui-icon '+(i>Math.floor(options.value)?'layui-icon-rate':'layui-icon-rate-solid')+'"></i></li>';
//如果没有选择半星的属性,却给了小数的数值,同意向上或向下取整
if(parseInt(options.value) !== options.value){
if(!options.half){
options.value = (Math.ceil(options.value) - options.value) < 0.5 ? Math.ceil(options.value): Math.floor(options.value)
}
}
temp+='</ul><span>'+(options.text ? options.value+"分" : "")+'</span>';
//模板
var temp = '<ul class="layui-rate">';
for(var i = 1;i <= options.length;i++){
var item = '<li class="layui-inline"><i class="layui-icon '+(i>Math.floor(options.value)?'layui-icon-rate':'layui-icon-rate-solid')+'"></i></li>';
if(options.half){
if(parseInt(options.value) !== options.value){
if(i == Math.ceil(options.value)){
temp = temp + '<li class="layui-inline"><i class="layui-icon layui-icon-rate-half"></i></li>';
}else{
temp = temp + item
}
}else{
temp = temp + item
}
}else{
temp = temp + '<li class="layui-inline"><i class="layui-icon '+(i>options.value?'layui-icon-rate':'layui-icon-rate-solid')+'"></i></li>';
}
}
temp += '</ul><span>' + (options.text ? options.value + "分" : "") + '</span>';
$(options.elem).after(temp);
//如果不是只读,那么进行点击事件
//如果不是只读,那么进行触控事件
if(!options.reader) that.action();
};
//li点击事件
Class.prototype.action=function(){
//li触控事件
Class.prototype.action = function(){
var that = this
,options = that.config
,_ul=$(options.elem).next("ul");
,_ul = $(options.elem).next("ul");
_ul.children("li").each(function(index){
var ind=index + 1, othis = $(this);
var ind = index + 1
,othis = $(this);
//点击
othis.on('click', function(e){
options.value=ind;
//将当前点击li的索引值赋给value
options.value = ind;
if(options.half){
var x=e.pageX-$(this).offset().left;
if(x<=13){
options.value=options.value-0.5;
//获取鼠标在li上的位置
var x = e.pageX - $(this).offset().left;
if(x <= 13){
options.value = options.value - 0.5;
}
}
if(options.text) _ul.next("span").text(options.value+"分");
if(options.text) _ul.next("span").text(options.value + "分")
})
//移入
othis.on('mousemove', function(e){
_ul.find("i").each(function(){
this.className = ICON_RATE;
})
_ul.find("i:lt("+ind+")").each(function(){
this.className = ICON_RATE_SOLID;
})
});
_ul.find("i:lt(" + ind + ")").each(function(){
this.className = ICON_RATE_SOLID ;
});
// 如果设置可选半星那么判断鼠标相对li的位置
if(options.half){
var x=e.pageX-$(this).offset().left;
if(x<=13){
$(this).children("i")[0].className=ICON_RATE_HALF
var x = e.pageX - $(this).offset().left;
if(x <= 13){
$(this).children("i")[0].className = ICON_RATE_HALF ;
}
}
})
@ -136,17 +145,19 @@ layui.define('jquery',function(exports){
//移出
othis.on('mouseout', function(){
_ul.find("i").each(function(){
this.className=ICON_RATE;
this.className = ICON_RATE;
});
_ul.find("i:lt("+ Math.floor(options.value) +")").each(function(){
this.className=ICON_RATE_SOLID;
})
_ul.find("i:lt(" + Math.floor(options.value) + ")").each(function(){
this.className = ICON_RATE_SOLID;
});
if(options.half){
if(parseInt(options.value)!== options.value){
_ul.children("li:eq("+Math.floor(options.value) +")").children("i")[0].className=ICON_RATE_HALF;
if(parseInt(options.value) !== options.value){
_ul.children("li:eq(" + Math.floor(options.value) + ")").children("i")[0].className = ICON_RATE_HALF ;
}
}
})
})
};