From 5a27ef86a62ae6c932fc6e1a4ed1204a763faf2c Mon Sep 17 00:00:00 2001 From: star <2321582517@qq.com> Date: Wed, 25 Apr 2018 19:21:27 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E5=9B=9B=E6=AC=A1=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/rate.html | 44 +++++++++++------- src/css/layui.css | 2 +- src/lay/modules/rate.js | 99 +++++++++++++++++++++++++++++------------ 3 files changed, 98 insertions(+), 47 deletions(-) diff --git a/examples/rate.html b/examples/rate.html index ea11359..0010e8a 100644 --- a/examples/rate.html +++ b/examples/rate.html @@ -55,28 +55,38 @@ layui.use(['rate'], function(){ var rate = layui.rate; //渲染 + // var ins1 = rate.render({ + // elem: '#test1' + // ,length: 7 + // ,value: 4 + // }); + // ins1.setValue(5); + + rate.render({ - elem: '#test1', - length: 7, - value: 4 + elem: '#test1' + ,length: 7 + ,value: 4 + }) + + rate.render({ + elem: '#test2' + ,length: 6 + ,value: 2 + ,half: true }) rate.render({ - elem: '#test2', - length: 6, - value: 2, - half: true + elem: '#test3' + ,length: 5 + ,value: 2.5 + ,text: true + ,half: true }) rate.render({ - elem: '#test3', - length: 5, - value: 3, - text: true - }) - rate.render({ - elem: '#test4', - length: 8, - value: 5, - reader: true + elem: '#test4' + ,length: 8 + ,value: 5 + ,reader: true }) }); diff --git a/src/css/layui.css b/src/css/layui.css index 339b4df..d6489d5 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -1037,7 +1037,7 @@ 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{font-size: 24px;color: #FF7F00;} +.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: 20px;} diff --git a/src/lay/modules/rate.js b/src/lay/modules/rate.js index cb7564b..8e520bc 100644 --- a/src/lay/modules/rate.js +++ b/src/lay/modules/rate.js @@ -22,6 +22,22 @@ layui.define('jquery',function(exports){ } } + //操作当前实例 + ,thisRate = function(){ + var that = this + ,options = that.config; + + return { + + function(value){ + console.log(options) + + //that.setValue(); + } + ,config: options + } + } + //字符常量 ,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' @@ -47,68 +63,94 @@ layui.define('jquery',function(exports){ Class.prototype.render = function(){ var that = this ,options = that.config; + var temp=''; + temp+=''+(options.text ? options.value+"分" : "")+''; $(options.elem).after(temp); - if(!options.reader) that.draw(); + //如果不是只读，那么进行点击事件 + if(!options.reader) that.action(); + + }; + //li点击事件 - Class.prototype.draw=function(){ + Class.prototype.action=function(){ var that = this ,options = that.config ,_ul=$(options.elem).next("ul"); + _ul.children("li").each(function(index){ - var ind=index+1; + var ind=index + 1, othis = $(this); //点击 - $(this).click(function(){ + othis.on('click', function(e){ options.value=ind; - + + if(options.half){ + 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+"分"); }) //移入 - $(this).mouseover(function(){ + othis.on('mousemove', function(e){ _ul.find("i").each(function(){ - $(this)[0].className=ICON_RATE; - }) + this.className = ICON_RATE; + }) + _ul.find("i:lt("+ind+")").each(function(){ + this.className = ICON_RATE_SOLID; + }) + + // 如果设置可选半星，那么判断鼠标相对li的位置 if(options.half){ - $(this).prevAll("li").children("i").each(function(){ - $(this)[0].className=ICON_RATE_SOLID; - }) - if(){ - + var x=e.pageX-$(this).offset().left; + if(x<=13){ + $(this).children("i")[0].className=ICON_RATE_HALF } - }else{ - _ul.find("i:lt("+ind+")").each(function(){ - $(this)[0].className=ICON_RATE_SOLID; - }) - } - + } }) //移出 - $(this).mouseout(function(){ + othis.on('mouseout', function(){ _ul.find("i").each(function(){ - $(this)[0].className=ICON_RATE; - }) - _ul.find("i:lt("+options.value+")").each(function(){ - $(this)[0].className=ICON_RATE_SOLID; + this.className=ICON_RATE; + }); + _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; + } + } }) }) }; - //事件处理 Class.prototype.events = function(){ var that = this @@ -116,11 +158,10 @@ layui.define('jquery',function(exports){ }; - //核心入口 rate.render = function(options){ var inst = new Class(options); - return inst; + return thisRate.call(inst); }; exports(MOD_NAME, rate);