last
This commit is contained in:
star
parent
ec213f8726
commit
9159559a6b
@ -55,17 +55,22 @@ layui.use(['rate'], function(){
|
||||
var rate = layui.rate;
|
||||
|
||||
//渲染
|
||||
var ins1 = rate.render({
|
||||
/*
|
||||
rate.set({
|
||||
elem: '#test1'
|
||||
,length: 7
|
||||
,value: 4
|
||||
});
|
||||
ins1.setvalue(2);
|
||||
,value: 4.7
|
||||
,theme: '#c00'
|
||||
,half: true
|
||||
,text: true
|
||||
,reader: true
|
||||
})
|
||||
*/
|
||||
|
||||
rate.render({
|
||||
elem: '#test1'
|
||||
,length: 7
|
||||
,value: 4.2
|
||||
,length: 5
|
||||
,value: 2.2
|
||||
})
|
||||
|
||||
rate.render({
|
||||
@ -73,21 +78,23 @@ layui.use(['rate'], function(){
|
||||
,length: 6
|
||||
,value: 2
|
||||
,half: true
|
||||
,theme: '#5FB878'
|
||||
})
|
||||
rate.render({
|
||||
elem: '#test3'
|
||||
,length: 5
|
||||
,value: 2.5
|
||||
,value: 2.8
|
||||
,text: true
|
||||
,half: true
|
||||
,theme: '#FF5722'
|
||||
})
|
||||
rate.render({
|
||||
elem: '#test4'
|
||||
,length: 8
|
||||
,value: 4.7
|
||||
,value: 4.8
|
||||
,reader: true
|
||||
,theme: '#01AAED'
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -1038,9 +1038,9 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
|
||||
/** 评分组件 **/
|
||||
.layui-icon-rate,.layui-icon-rate-solid,.layui-icon-rate-half{font-size: 24px;color: #FFB800;}
|
||||
.layui-rate-div{height: 120px;border: 1px solid #EEE;border-radius: 5px;padding: 20px;margin-top: 10px;margin-bottom: 10px;transition: 300ms;}
|
||||
.layui-rate-div{height: 120px;border: 1px solid #EEE;border-radius: 5px; padding: 20px;margin-top: 10px;margin-bottom: 10px;transition: 300ms;}
|
||||
.layui-rate-div:hover{box-shadow: 0 0 10px #CCC; transition: 300ms;}
|
||||
.layui-rate{display: inline-block;list-style: none;padding: 20px;}
|
||||
.layui-rate{display: inline-block; list-style: none; padding: 10px;}
|
||||
.layui-rate li:hover{cursor: pointer;}
|
||||
|
||||
|
||||
|
||||
@ -36,8 +36,9 @@ 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',ELEM_VIEW = 'layui-rate', ICON_RATE = 'layui-icon-rate', ICON_RATE_SOLID = 'layui-icon-rate-solid', ICON_RATE_HALF = 'layui-icon-rate-half'
|
||||
|
||||
,ICON_SOLID_HALF = 'layui-icon-rate-solid layui-icon-rate-half', ICON_SOLID_RATE = 'layui-icon-rate-solid layui-icon-rate', ICON_HALF_RATE = 'layui-icon-rate layui-icon-rate-half'
|
||||
|
||||
//构造器
|
||||
,Class = function(options){
|
||||
@ -49,33 +50,40 @@ layui.define('jquery',function(exports){
|
||||
|
||||
//默认配置
|
||||
Class.prototype.config = {
|
||||
length: 5, //初始长度
|
||||
text: false, //是否显示评分等级
|
||||
reader: false, //是否只读
|
||||
half: false, //是否可以半星
|
||||
value: 3 //星星选中个数
|
||||
length: 5 //初始长度
|
||||
,text: false //是否显示评分等级
|
||||
,reader: false //是否只读
|
||||
,half: false //是否可以半星
|
||||
,value: 0 //星星选中个数
|
||||
,theme: ''
|
||||
};
|
||||
|
||||
//评分渲染
|
||||
Class.prototype.render = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
,options = that.config
|
||||
,style = 'style="color: '+ options.theme + ';"';
|
||||
|
||||
//如果没有选择半星的属性，却给了小数的数值，同意向上或向下取整
|
||||
options.elem = $(options.elem);
|
||||
|
||||
//如果没有选择半星的属性，却给了小数的数值，统一向上或向下取整
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
//模板
|
||||
//组件模板
|
||||
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>';
|
||||
var item = '<li class="layui-inline"><i class="layui-icon '
|
||||
+ (i>Math.floor(options.value)?ICON_RATE:ICON_RATE_SOLID)
|
||||
+ '" '+ style +'></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>';
|
||||
temp = temp + '<li class="layui-inline"><i class="layui-icon layui-icon-rate-half" '+ style +'></i></li>';
|
||||
}else{
|
||||
temp = temp + item
|
||||
}
|
||||
@ -83,34 +91,42 @@ layui.define('jquery',function(exports){
|
||||
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 = temp +item;
|
||||
}
|
||||
}
|
||||
temp += '</ul><span>' + (options.text ? options.value + "分" : "") + '</span>';
|
||||
|
||||
$(options.elem).after(temp);
|
||||
//开始插入替代元素
|
||||
var othis = options.elem
|
||||
,hasRender = othis.next('.' + ELEM_VIEW);
|
||||
|
||||
//生成替代元素
|
||||
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
|
||||
|
||||
that.elemTemp = $(temp);
|
||||
othis.html(that.elemTemp);
|
||||
|
||||
othis.addClass("layui-inline");
|
||||
|
||||
//如果不是只读，那么进行触控事件
|
||||
if(!options.reader) that.action();
|
||||
|
||||
};
|
||||
|
||||
|
||||
//重置value
|
||||
//评分重置
|
||||
Class.prototype.setvalue = function(value){
|
||||
var that = this
|
||||
,options = that.config ;
|
||||
|
||||
options.value = value
|
||||
|
||||
}
|
||||
|
||||
options.value = value ;
|
||||
that.render();
|
||||
};
|
||||
|
||||
//li触控事件
|
||||
Class.prototype.action = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,_ul = $(options.elem).next("ul");
|
||||
,_ul = that.elemTemp;
|
||||
|
||||
_ul.children("li").each(function(index){
|
||||
var ind = index + 1
|
||||
@ -120,7 +136,6 @@ layui.define('jquery',function(exports){
|
||||
othis.on('click', function(e){
|
||||
//将当前点击li的索引值赋给value
|
||||
options.value = ind;
|
||||
|
||||
if(options.half){
|
||||
//获取鼠标在li上的位置
|
||||
var x = e.pageX - $(this).offset().left;
|
||||
@ -134,17 +149,16 @@ layui.define('jquery',function(exports){
|
||||
//移入
|
||||
othis.on('mousemove', function(e){
|
||||
_ul.find("i").each(function(){
|
||||
this.className = ICON_RATE;
|
||||
$(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF)
|
||||
});
|
||||
_ul.find("i:lt(" + ind + ")").each(function(){
|
||||
this.className = ICON_RATE_SOLID ;
|
||||
$(this).addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE)
|
||||
});
|
||||
|
||||
// 如果设置可选半星，那么判断鼠标相对li的位置
|
||||
if(options.half){
|
||||
var x = e.pageX - $(this).offset().left;
|
||||
if(x <= 13){
|
||||
$(this).children("i")[0].className = ICON_RATE_HALF ;
|
||||
othis.children("i").addClass(ICON_RATE_HALF).removeClass(ICON_RATE_SOLID)
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -152,15 +166,15 @@ layui.define('jquery',function(exports){
|
||||
//移出
|
||||
othis.on('mouseout', function(){
|
||||
_ul.find("i").each(function(){
|
||||
this.className = ICON_RATE;
|
||||
$(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF)
|
||||
});
|
||||
_ul.find("i:lt(" + Math.floor(options.value) + ")").each(function(){
|
||||
this.className = ICON_RATE_SOLID;
|
||||
$(this).addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE)
|
||||
});
|
||||
|
||||
//如果设置可选半星，根据分数判断是否有半星
|
||||
if(options.half){
|
||||
if(parseInt(options.value) !== options.value){
|
||||
_ul.children("li:eq(" + Math.floor(options.value) + ")").children("i")[0].className = ICON_RATE_HALF ;
|
||||
_ul.children("li:eq(" + Math.floor(options.value) + ")").children("i").addClass(ICON_RATE_HALF).removeClass(ICON_SOLID_RATE)
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -168,12 +182,10 @@ layui.define('jquery',function(exports){
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
//事件处理
|
||||
Class.prototype.events = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
|
||||
};
|
||||
|
||||
//核心入口
|
||||
|
||||
Loading…
Reference in New Issue
Block a user