From 591474e02e1e24b467ffe2822243219cb5ced600 Mon Sep 17 00:00:00 2001 From: weizhiqiang <598748873@qq.com> Date: Tue, 13 Nov 2018 13:44:32 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=BB=91=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/lib/layui/lay/modules/slider.js | 2 + .../src/main/webapp/assets/lib/layui/layui.js | 1 + .../webapp/assets/lib/winui/css/winui.css | 208 +++++++++++++++++- 3 files changed, 207 insertions(+), 4 deletions(-) create mode 100644 skyeye-web/src/main/webapp/assets/lib/layui/lay/modules/slider.js diff --git a/skyeye-web/src/main/webapp/assets/lib/layui/lay/modules/slider.js b/skyeye-web/src/main/webapp/assets/lib/layui/lay/modules/slider.js new file mode 100644 index 000000000..446378d99 --- /dev/null +++ b/skyeye-web/src/main/webapp/assets/lib/layui/lay/modules/slider.js @@ -0,0 +1,2 @@ +/** layui-v2.4.5 MIT License By https://www.layui.com */ + ;layui.define("jquery",function(e){"use strict";var i=layui.jquery,t={config:{},index:layui.slider?layui.slider.index+1e4:0,set:function(e){var t=this;return t.config=i.extend({},t.config,e),t},on:function(e,i){return layui.onevent.call(this,n,e,i)}},a=function(){var e=this,i=e.config;return{setValue:function(i,t){return e.slide("set",i,t||0)},config:i}},n="slider",l="layui-disabled",s="layui-slider",r="layui-slider-bar",o="layui-slider-wrap",u="layui-slider-wrap-btn",d="layui-slider-tips",v="layui-slider-input",c="layui-slider-input-txt",m="layui-slider-input-btn",p="layui-slider-hover",f=function(e){var a=this;a.index=++t.index,a.config=i.extend({},a.config,t.config,e),a.render()};f.prototype.config={type:"default",min:0,max:100,value:0,step:1,showstep:!1,tips:!0,input:!1,range:!1,height:200,disabled:!1,theme:"#009688"},f.prototype.render=function(){var e=this,t=e.config;if(t.step<1&&(t.step=1),t.maxt.min?a:t.min,t.value[1]=n>t.min?n:t.min,t.value[0]=t.value[0]>t.max?t.max:t.value[0],t.value[1]=t.value[1]>t.max?t.max:t.value[1];var r=Math.floor((t.value[0]-t.min)/(t.max-t.min)*100),v=Math.floor((t.value[1]-t.min)/(t.max-t.min)*100),m=v-r+"%";r+="%",v+="%"}else{"object"==typeof t.value&&(t.value=Math.min.apply(null,t.value)),t.valuet.max&&(t.value=t.max);var m=Math.floor((t.value-t.min)/(t.max-t.min)*100)+"%"}var p=t.disabled?"#c2c2c2":t.theme,f='
'+(t.tips?'
':"")+'
'+(t.range?'
':"")+"
",h=i(t.elem),y=h.next("."+s);if(y[0]&&y.remove(),e.elemTemp=i(f),t.range?(e.elemTemp.find("."+o).eq(0).data("value",t.value[0]),e.elemTemp.find("."+o).eq(1).data("value",t.value[1])):e.elemTemp.find("."+o).data("value",t.value),h.html(e.elemTemp),"vertical"===t.type&&e.elemTemp.height(t.height+"px"),t.showstep){for(var g=(t.max-t.min)/t.step,b="",x=1;x')}e.elemTemp.append(b)}if(t.input&&!t.range){var w=i('
');h.css("position","relative"),h.append(w),h.find("."+c).children("input").val(t.value),"vertical"===t.type?w.css({left:0,top:-48}):e.elemTemp.css("margin-right",w.outerWidth()+15)}t.disabled?(e.elemTemp.addClass(l),e.elemTemp.find("."+u).addClass(l)):e.slide(),e.elemTemp.find("."+u).on("mouseover",function(){var a="vertical"===t.type?t.height:e.elemTemp[0].offsetWidth,n=e.elemTemp.find("."+o),l="vertical"===t.type?a-i(this).parent()[0].offsetTop-n.height():i(this).parent()[0].offsetLeft,s=l/a*100,r=i(this).parent().data("value"),u=t.setTips?t.setTips(r):r;e.elemTemp.find("."+d).html(u),"vertical"===t.type?e.elemTemp.find("."+d).css({bottom:s+"%","margin-bottom":"20px",display:"inline-block"}):e.elemTemp.find("."+d).css({left:s+"%",display:"inline-block"})}).on("mouseout",function(){e.elemTemp.find("."+d).css("display","none")})},f.prototype.slide=function(e,t,a){var n=this,l=n.config,s=n.elemTemp,f=function(){return"vertical"===l.type?l.height:s[0].offsetWidth},h=s.find("."+o),y=s.next("."+v),g=y.children("."+c).children("input").val(),b=100/((l.max-l.min)/Math.ceil(l.step)),x=function(e,i){e=Math.ceil(e)*b>100?Math.ceil(e)*b:Math.round(e)*b,e=e>100?100:e,h.eq(i).css("vertical"===l.type?"bottom":"left",e+"%");var t=T(h[0].offsetLeft),a=l.range?T(h[1].offsetLeft):0;"vertical"===l.type?(s.find("."+d).css({bottom:e+"%","margin-bottom":"20px"}),t=T(f()-h[0].offsetTop-h.height()),a=l.range?T(f()-h[1].offsetTop-h.height()):0):s.find("."+d).css("left",e+"%"),t=t>100?100:t,a=a>100?100:a;var n=Math.min(t,a),o=Math.abs(t-a);"vertical"===l.type?s.find("."+r).css({height:o+"%",bottom:n+"%"}):s.find("."+r).css({width:o+"%",left:n+"%"});var u=l.min+Math.round((l.max-l.min)*e/100);if(g=u,y.children("."+c).children("input").val(g),h.eq(i).data("value",u),u=l.setTips?l.setTips(u):u,s.find("."+d).html(u),l.range){var v=[h.eq(0).data("value"),h.eq(1).data("value")];v[0]>v[1]&&v.reverse()}l.change&&l.change(l.range?v:u)},T=function(e){var i=e/f()*100/b,t=Math.round(i)*b;return e==f()&&(t=Math.ceil(i)*b),t},w=i(['
f()&&(r=f());var o=r/f()*100/b;x(o,e),t.addClass(p),s.find("."+d).show(),i.preventDefault()},o=function(){t.removeClass(p),s.find("."+d).hide()};M(r,o)})}),s.on("click",function(e){var t=i("."+u);if(!t.is(event.target)&&0===t.has(event.target).length&&t.length){var a,n="vertical"===l.type?f()-e.clientY+i(this).offset().top:e.clientX-i(this).offset().left;n<0&&(n=0),n>f()&&(n=f());var s=n/f()*100/b;a=l.range?"vertical"===l.type?Math.abs(n-parseInt(i(h[0]).css("bottom")))>Math.abs(n-parseInt(i(h[1]).css("bottom")))?1:0:Math.abs(n-h[0].offsetLeft)>Math.abs(n-h[1].offsetLeft)?1:0:0,x(s,a),e.preventDefault()}}),y.hover(function(){var e=i(this);e.children("."+m).fadeIn("fast")},function(){var e=i(this);e.children("."+m).fadeOut("fast")}),y.children("."+m).children("i").each(function(e){i(this).on("click",function(){g=1==e?g-l.stepl.max?l.max:Number(g)+l.step;var i=(g-l.min)/(l.max-l.min)*100/b;x(i,0)})});var q=function(){var e=this.value;e=isNaN(e)?0:e,e=el.max?l.max:e,this.value=e;var i=(e-l.min)/(l.max-l.min)*100/b;x(i,0)};y.children("."+c).children("input").on("keydown",function(e){13===e.keyCode&&(e.preventDefault(),q.call(this))}).on("change",q)},f.prototype.events=function(){var e=this;e.config},t.render=function(e){var i=new f(e);return a.call(i)},e(n,t)}); \ No newline at end of file diff --git a/skyeye-web/src/main/webapp/assets/lib/layui/layui.js b/skyeye-web/src/main/webapp/assets/lib/layui/layui.js index 8bf10cf93..3bc8227d5 100644 --- a/skyeye-web/src/main/webapp/assets/lib/layui/layui.js +++ b/skyeye-web/src/main/webapp/assets/lib/layui/layui.js @@ -91,6 +91,7 @@ function isNull(str){ ueditor: 'modules/ueditor.all', // 百度富文本编辑器 form: 'modules/form', // 表单集 colorpicker: 'modules/colorpicker', //颜色选择器 + slider: 'modules/slider', //滑块 upload: 'modules/upload', // 上传 tree: 'modules/tree', // 树结构 table: 'modules/table', // 表格 diff --git a/skyeye-web/src/main/webapp/assets/lib/winui/css/winui.css b/skyeye-web/src/main/webapp/assets/lib/winui/css/winui.css index 73e4e9d3b..c08bb777f 100644 --- a/skyeye-web/src/main/webapp/assets/lib/winui/css/winui.css +++ b/skyeye-web/src/main/webapp/assets/lib/winui/css/winui.css @@ -3,10 +3,6 @@ html, body { height: 100%; background-size: cover; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; } button{ @@ -2659,6 +2655,210 @@ body .layer-ext-winconfirm { } /*** 颜色选择器结束 ***/ +/*** 滑块开始 ***/ +.layui-slider { + height: 4px; + background: #e2e2e2; + border-radius: 3px; + position: relative; + cursor: pointer +} + +.layui-slider-bar { + border-radius: 3px; + position: absolute; + height: 100% +} + +.layui-slider-step { + position: absolute; + top: 0; + width: 4px; + height: 4px; + border-radius: 50%; + background: #FFF; + -webkit-transform: translateX(-50%); + transform: translateX(-50%) +} + +.layui-slider-wrap { + width: 36px; + height: 36px; + position: absolute; + top: -16px; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + z-index: 10; + text-align: center +} + +.layui-slider-wrap-btn { + width: 12px; + height: 12px; + border-radius: 50%; + background: #FFF; + display: inline-block; + vertical-align: middle; + cursor: pointer; + transition: .3s +} + +.layui-slider-wrap:after { + content: ""; + height: 100%; + display: inline-block; + vertical-align: middle +} + +.layui-slider-wrap-btn .layui-slider-hover, +.layui-slider-wrap-btn:hover { + transform: scale(1.2) +} + +.layui-slider-wrap-btn .layui-disabled:hover { + transform: scale(1)!important +} + +.layui-slider-tips { + position: absolute; + top: -42px; + z-index: 66666666; + white-space: nowrap; + display: none; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + color: #FFF; + background: #000; + border-radius: 3px; + height: 25px; + line-height: 25px; + padding: 0 10px +} + +.layui-slider-tips:after { + content: ''; + position: absolute; + bottom: -12px; + left: 50%; + margin-left: -6px; + width: 0; + height: 0; + border-width: 6px; + border-style: solid; + border-color: #000 transparent transparent +} + +.layui-slider-input { + width: 70px; + height: 32px; + border: 1px solid #e6e6e6; + border-radius: 3px; + font-size: 16px; + line-height: 32px; + position: absolute; + right: 0; + top: -15px +} + +.layui-slider-input-btn { + display: none; + position: absolute; + top: 0; + right: 0; + width: 20px; + height: 100%; + border-left: 1px solid #d2d2d2 +} + +.layui-slider-input-btn i { + cursor: pointer; + position: absolute; + right: 0; + bottom: 0; + width: 20px; + height: 50%; + font-size: 12px; + line-height: 16px; + text-align: center; + color: #999 +} + +.layui-slider-input-btn i:first-child { + top: 0; + border-bottom: 1px solid #d2d2d2 +} + +.layui-slider-input-txt { + height: 100%; + font-size: 14px +} + +.layui-slider-input-txt input { + height: 100%; + border: none +} + +.layui-slider-input-btn i:hover { + color: #009688 +} + +.layui-slider-vertical { + width: 4px; + margin-left: 34px +} + +.layui-slider-vertical .layui-slider-bar { + width: 4px +} + +.layui-slider-vertical .layui-slider-step { + top: auto; + left: 0; + -webkit-transform: translateY(50%); + transform: translateY(50%) +} + +.layui-slider-vertical .layui-slider-wrap { + top: auto; + left: -16px; + -webkit-transform: translateY(50%); + transform: translateY(50%) +} + +.layui-slider-vertical .layui-slider-tips { + top: auto; + left: 2px +} + +@media \0screen { + .layui-slider-wrap-btn { + margin-left: -20px + } + .layui-slider-vertical .layui-slider-wrap-btn { + margin-left: 0; + margin-bottom: -20px + } + .layui-slider-vertical .layui-slider-tips { + margin-left: -8px + } + .layui-slider>span { + margin-left: 8px + } +} + +.layui-auxiliar-moving { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + background: 0 0; + z-index: 9999999999 +} +/*** 滑块结束 ***/ + /*** 小程序页面管理start ***/ .smpro{ height: calc(100vh - 45px); -- GitLab