From 6c5900d0f59a209b3ab885632d150ad41271ee65 Mon Sep 17 00:00:00 2001 From: star <2321582517@qq.com> Date: Sat, 28 Apr 2018 10:54:27 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20rate=20=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/rate.html | 45 ++++++++++++++++++++++++++++------------- src/css/layui.css | 16 +++++++++------ src/lay/modules/rate.js | 34 ++++++++++++++++++++++--------- 3 files changed, 66 insertions(+), 29 deletions(-) diff --git a/examples/rate.html b/examples/rate.html index ee36787c..6b99d586 100644 --- a/examples/rate.html +++ b/examples/rate.html @@ -55,22 +55,34 @@ layui.use(['rate'], function(){ var rate = layui.rate; //渲染 - /* - rate.set({ - elem: '#test1' - ,length: 7 - ,value: 4.7 - ,theme: '#c00' - ,half: true - ,text: true - ,reader: true - }) - */ - + + // rate.set({ + // elem: '#test1' + // ,length: 7 + // ,value: 4.7 + // ,theme: '#c00' + // ,half: true + // ,text: true + // ,reader: true + // }) + rate.render({ elem: '#test1' - ,length: 5 + ,length: 3 ,value: 2.2 + ,text: true + ,half: true + ,setText: function(value){ + + var arrs = { + '0.5': '极差' + , '1' : '一般' + ,'1.5': '满意' + ,'2': '极满意' + }; + + this.span.text(arrs[value] || ( value + "星")); + } }) rate.render({ @@ -79,15 +91,20 @@ layui.use(['rate'], function(){ ,value: 2 ,half: true ,theme: '#5FB878' + ,choose: function(value){ + if( value > 3) alert("111") + } }) + rate.render({ elem: '#test3' - ,length: 5 + ,length: 3 ,value: 2.8 ,text: true ,half: true ,theme: '#FF5722' }) + rate.render({ elem: '#test4' ,length: 8 diff --git a/src/css/layui.css b/src/css/layui.css index c8f322d1..c3692011 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -1037,11 +1037,14 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh .layui-upload-wrap .layui-upload-file{display: block!important; position: absolute; left: 0; top: 0; z-index: 10; font-size: 100px; width: 100%; height: 100%; opacity: .01; filter: Alpha(opacity=1); cursor: pointer;} /** 评分组件 **/ -.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:hover{box-shadow: 0 0 10px #CCC; transition: 300ms;} -.layui-rate{display: inline-block; list-style: none; padding: 10px;} -.layui-rate li:hover{cursor: pointer;} +.layui-icon-rate, +.layui-icon-rate-solid, +.layui-icon-rate-half{ font-size: 20px; color: #FFB800;} +.layui-rate, +.layui-rate *{display: inline-block; vertical-align: middle;} +.layui-rate{list-style: none; padding: 10px 5px 10px 0; font-size: 0;} +.layui-rate li i{margin-right: 5px; transition: all .3s; -webkit-transition: all .3s;} +.layui-rate li i:hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);} @@ -1280,7 +1283,8 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co .layui-anim{-webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both;} .layui-anim.layui-icon{display: inline-block;} .layui-anim-loop{-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;} -.layui-trans,.layui-trans a{transition: all .3s; -webkit-transition: all .3s;} /* 过度变换 */ +.layui-trans, +.layui-trans a{transition: all .3s; -webkit-transition: all .3s;} /* 过度变换 */ @-webkit-keyframes layui-rotate{ /* 循环旋转 */ from {-webkit-transform: rotate(0deg);} diff --git a/src/lay/modules/rate.js b/src/lay/modules/rate.js index b8c4311e..66616eed 100644 --- a/src/lay/modules/rate.js +++ b/src/lay/modules/rate.js @@ -1,4 +1,10 @@ +/** + @Title: layui.upload 文件上传 + @Author: star + @License：MIT + + */ layui.define('jquery',function(exports){ "use strict"; @@ -62,7 +68,7 @@ layui.define('jquery',function(exports){ Class.prototype.render = function(){ var that = this ,options = that.config - ,style = 'style="color: '+ options.theme + ';"'; + ,style = options.theme ? ('style="color: '+ options.theme + ';"') : ''; options.elem = $(options.elem); @@ -83,7 +89,7 @@ layui.define('jquery',function(exports){ if(options.half){ if(parseInt(options.value) !== options.value){ if(i == Math.ceil(options.value)){ - temp = temp + '
    • '; + temp = temp + '
    • '; }else{ temp = temp + item } @@ -94,7 +100,7 @@ layui.define('jquery',function(exports){ temp = temp +item; } } - temp += '' + (options.text ? options.value + "分" : "") + ''; + temp += '' + (options.text ? (''+ options.value + '星') : '') + ''; //开始插入替代元素 var othis = options.elem @@ -104,6 +110,11 @@ layui.define('jquery',function(exports){ hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender that.elemTemp = $(temp); + + options.span = that.elemTemp.next('span'); + + options.setText && options.setText(options.value); + othis.html(that.elemTemp); othis.addClass("layui-inline"); @@ -126,7 +137,8 @@ layui.define('jquery',function(exports){ Class.prototype.action = function(){ var that = this ,options = that.config - ,_ul = that.elemTemp; + ,_ul = that.elemTemp + ,wide = _ul.find("i").width(); _ul.children("li").each(function(index){ var ind = index + 1 @@ -139,12 +151,16 @@ layui.define('jquery',function(exports){ if(options.half){ //获取鼠标在li上的位置 var x = e.pageX - $(this).offset().left; - if(x <= 13){ + if(x <= wide / 2){ options.value = options.value - 0.5; } } - if(options.text) _ul.next("span").text(options.value + "分") - }) + + if(options.text) _ul.next("span").text(options.value + "星"); + + options.choose && options.choose(options.value); + options.setText && options.setText(options.value); + }); //移入 othis.on('mousemove', function(e){ @@ -157,14 +173,14 @@ layui.define('jquery',function(exports){ // 如果设置可选半星，那么判断鼠标相对li的位置 if(options.half){ var x = e.pageX - $(this).offset().left; - if(x <= 13){ + if(x <= wide / 2){ othis.children("i").addClass(ICON_RATE_HALF).removeClass(ICON_RATE_SOLID) } } }) //移出 - othis.on('mouseout', function(){ + othis.on('mouseleave', function(){ _ul.find("i").each(function(){ $(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF) });