diff --git a/examples/rate.html b/examples/rate.html index 0ac38a9..ee36787 100644 --- a/examples/rate.html +++ b/examples/rate.html @@ -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' }) - }); diff --git a/src/css/layui.css b/src/css/layui.css index d6489d5..c8f322d 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -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;} diff --git a/src/lay/modules/rate.js b/src/lay/modules/rate.js index 07a61a2..b8c4311 100644 --- a/src/lay/modules/rate.js +++ b/src/lay/modules/rate.js @@ -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 = '' + (options.text ? options.value + "分" : "") + ''; - $(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; @@ -133,18 +148,17 @@ layui.define('jquery',function(exports){ //移入 othis.on('mousemove', function(e){ - _ul.find("i").each(function(){ - this.className = ICON_RATE; + _ul.find("i").each(function(){ + $(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; - }; //核心入口