diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..25daf75 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // 使用 IntelliSense 了解相关属性。 + // 悬停以查看现有属性的描述。 + // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "启动 Chrome 并打开 localhost", + "url": "http://localhost:8080/test/demo.html", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/src/layer.js b/src/layer.js index 8c943a5..bf0b9d7 100644 --- a/src/layer.js +++ b/src/layer.js @@ -31,7 +31,7 @@ var isLayui = window.layui && layui.define, $, win, ready = { btn: ['确定', '取消'], //五种原始层模式 - type: ['dialog', 'page', 'iframe', 'loading', 'tips'], + type: ['dialog', 'page', 'iframe', 'loading', 'tips', 'notice'], //获取节点的style属性值 getStyle: function(node, name){ @@ -144,7 +144,8 @@ var layer = { closeBtn: false, btn: false, resize: false, - end: end + end: end, + anim: 1 }, (type && !ready.config.skin) ? { skin: skin + ' layui-layer-hui', anim: anim @@ -156,6 +157,26 @@ var layer = { return options; }())); }, + + notice: function(content, options, end){ //最常用提示层 + var type = typeof options === 'function', rskin = ready.config.skin; + var skin = (rskin ? rskin + ' ' + rskin + '-notice' : '')||'layui-layer-notice'; + if(type) end = options; + return layer.open($.extend({ + content: content, + shade: false, + skin: skin, + time: 3000, + btn: false, + area: '330px', + resize: false, + type: 5, + anim:5, + offset: 'notice', + tipsMore: true, + end: end + }, type ? {} : options)); + }, load: function(icon, options){ return layer.open($.extend({ @@ -193,7 +214,7 @@ Class.pt = Class.prototype; //缓存常用字符 var doms = ['layui-layer', '.layui-layer-title', '.layui-layer-main', '.layui-layer-dialog', 'layui-layer-iframe', 'layui-layer-content', 'layui-layer-btn', 'layui-layer-close']; -doms.anim = ['layer-anim-00', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'layer-anim-04', 'layer-anim-05', 'layer-anim-06']; +doms.anim = ['layer-anim-00', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'layer-anim-04', 'layer-anim-05', 'layer-anim-06','layer-anim-07']; //默认配置 Class.pt.config = { @@ -304,6 +325,10 @@ Class.pt.creat = function(){ config.tips = typeof config.tips === 'object' ? config.tips : [config.tips, true]; config.tipsMore || layer.closeAll('tips'); break; + case 5: + config.btn = ('btn' in config) ? config.btn : ready.btn[0]; + config.tipsMore || layer.closeAll('notice'); + break; } //建立容器 @@ -343,7 +368,17 @@ Class.pt.creat = function(){ } config.time <= 0 || setTimeout(function(){ - layer.close(that.index) + if(config.type == 5){ + $.each($('.'+doms[0]+'-notice'), function(i, item){ + var othis = $(this); + if(othis.attr('times') > that.index){ + othis.offset({top:(othis.offset().top - that.layero.outerHeight() - 16)}); + } + }); + layer.close(that.index) + }else{ + layer.close(that.index) + } }, config.time); that.move().callback(); @@ -436,6 +471,19 @@ Class.pt.offset = function(){ } else if(config.offset === 'rb'){ //右下角 that.offsetTop = win.height() - area[1]; that.offsetLeft = win.width() - area[0]; + } else if(config.offset === 'notice'){ + var top = 0; + if($('.'+doms[0]+'-notice').length > 1){ + $.each($('.'+doms[0]+'-notice'), function(){ + var othis = $(this); + if(this.id !== layero[0].id) { + top = top > othis.offset().top ? top : othis.offset().top; + } + }); + top = top + area[1]; + } + that.offsetTop = top + 16; + that.offsetLeft = win.width() - area[0] - 16; } else { that.offsetTop = config.offset; } @@ -656,6 +704,14 @@ Class.pt.callback = function(){ function cancel(){ var close = config.cancel && config.cancel(that.index, layero); close === false || layer.close(that.index); + if(that.config.type === 5){ + $.each($('.'+doms[0]+'-notice'), function(i, item){ + var othis = $(this); + if(othis.attr('times') > that.index){ + othis.offset({top:(othis.offset().top - layero.outerHeight() - 16)}); + } + }); + } } //右上角关闭回调 diff --git a/src/skin/default/icon/bigger.png b/src/skin/default/icon/bigger.png deleted file mode 100644 index e9f198e..0000000 Binary files a/src/skin/default/icon/bigger.png and /dev/null differ diff --git a/src/skin/default/icon/close_big.png b/src/skin/default/icon/close_big.png deleted file mode 100644 index b51d6b6..0000000 Binary files a/src/skin/default/icon/close_big.png and /dev/null differ diff --git a/src/skin/default/icon/close_small.png b/src/skin/default/icon/close_small.png deleted file mode 100644 index 44ec85c..0000000 Binary files a/src/skin/default/icon/close_small.png and /dev/null differ diff --git a/src/skin/default/icon/download.png b/src/skin/default/icon/download.png deleted file mode 100644 index 0514c20..0000000 Binary files a/src/skin/default/icon/download.png and /dev/null differ diff --git a/src/skin/default/icon/full_screen.png b/src/skin/default/icon/full_screen.png deleted file mode 100644 index f9bf06c..0000000 Binary files a/src/skin/default/icon/full_screen.png and /dev/null differ diff --git a/src/skin/default/icon/next.png b/src/skin/default/icon/next.png deleted file mode 100644 index 0a973df..0000000 Binary files a/src/skin/default/icon/next.png and /dev/null differ diff --git a/src/skin/default/icon/prev.png b/src/skin/default/icon/prev.png deleted file mode 100644 index 5a421b3..0000000 Binary files a/src/skin/default/icon/prev.png and /dev/null differ diff --git a/src/skin/default/icon/rotate.png b/src/skin/default/icon/rotate.png deleted file mode 100644 index e036d63..0000000 Binary files a/src/skin/default/icon/rotate.png and /dev/null differ diff --git a/src/skin/default/icon/smaller.png b/src/skin/default/icon/smaller.png deleted file mode 100644 index 8072df8..0000000 Binary files a/src/skin/default/icon/smaller.png and /dev/null differ diff --git a/src/theme/default/layer.css b/src/theme/default/layer.css index 9d743ba..9d92976 100644 --- a/src/theme/default/layer.css +++ b/src/theme/default/layer.css @@ -18,7 +18,7 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;} .layui-layer-border{border: 1px solid #B2B2B2; border: 1px solid rgba(0,0,0,.1); box-shadow: 1px 1px 5px rgba(0,0,0,.2);} .layui-layer-load{background:url(loading-1.gif) #eee center center no-repeat;} .layui-layer-ico{ background:url(icon.png) no-repeat;} -.layui-layer-dialog .layui-layer-ico, +.layui-layer-dialog .layui-layer-ico,.layui-layer-notice .layui-layer-ico, .layui-layer-setwin a, .layui-layer-btn a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;} @@ -75,9 +75,9 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;} .layui-layer-btn-c{text-align: center;} /* 定制化 */ -.layui-layer-dialog{min-width:260px;} -.layui-layer-dialog .layui-layer-content{position: relative; padding:20px; line-height:24px; word-break: break-all; overflow:hidden; font-size:14px; overflow-x: hidden; overflow-y:auto;} -.layui-layer-dialog .layui-layer-content .layui-layer-ico{position:absolute; top:16px; left:15px; _left:-40px; width:30px; height:30px;} +.layui-layer-dialog,.layui-layer-notice{min-width:260px;} +.layui-layer-dialog .layui-layer-content,.layui-layer-notice .layui-layer-content{position: relative; padding:20px; line-height:24px; word-break: break-all; overflow:hidden; font-size:14px; overflow-x: hidden; overflow-y:auto;} +.layui-layer-dialog .layui-layer-content .layui-layer-ico,.layui-layer-notice .layui-layer-content .layui-layer-ico{position:absolute; top:16px; left:15px; _left:-40px; width:30px; height:30px;} .layui-layer-ico1{background-position:-30px 0 } .layui-layer-ico2{background-position:-60px 0;} .layui-layer-ico3{background-position:-90px 0;} @@ -88,7 +88,7 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;} .layui-layer-msg{min-width:180px; border:1px solid #D3D4D3; box-shadow: none;} .layui-layer-hui{min-width:100px; background-color: #000; filter:alpha(opacity=60); background-color: rgba(0,0,0,0.6); color: #fff; border:none;} .layui-layer-hui .layui-layer-content{padding:12px 25px; text-align:center;} -.layui-layer-dialog .layui-layer-padding{padding: 20px 20px 20px 55px; text-align: left;} +.layui-layer-dialog .layui-layer-padding,.layui-layer-notice .layui-layer-padding{padding: 20px 20px 20px 55px; text-align: left;} .layui-layer-page .layui-layer-content{position:relative; overflow:auto;} .layui-layer-page .layui-layer-btn,.layui-layer-iframe .layui-layer-btn{padding-top:10px;} .layui-layer-nobg{background:none;} @@ -155,7 +155,6 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;} .layui-layer-imgnext{right:10px; _right:8px; background-position:-5px -50px; _background-position:-70px -50px;} .layui-layer-imgnext:hover{background-position:-33px -50px; _background-position:-120px -50px;} .layui-layer-imgbar{position:absolute; left:0; bottom:0; width:220px; height:32px; line-height:32px; color:#fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;} -.layui-layer-imgtit{/*position:absolute; left:20px;*/} .layui-layer-imgtit *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; font-size:12px;} .layui-layer-imgtit a{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#fff;} .layui-layer-imgtit a:hover{color:#fff; text-decoration:underline;} @@ -267,23 +266,12 @@ i{ transform: rotate(270deg); -webkit-transform: rotate(270deg); } -@keyframes layer-bounceOut { - 100% {opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7);} - 30% {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);} - 0% {-webkit-transform: scale(1); -ms-transform: scale(1);transform: scale(1);} -} -.layer-anim-close{-webkit-animation-name: layer-bounceOut;animation-name: layer-bounceOut; -webkit-animation-duration:.2s; animation-duration:.2s;} - -@media screen and (max-width: 1100px) { - .layui-layer-iframe{overflow-y: auto; -webkit-overflow-scrolling: touch;} -} .image{ position: absolute; margin:0; /*之所以不使用auto直接垂直居中，是因为当图片旋转时left值会很难计算*/ padding:0; z-index: 10; display: none; - moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; @@ -383,7 +371,6 @@ i{ left: 0; right: 0; bottom: 0; - moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; diff --git a/src/theme/element/style.css b/src/theme/element/style.css new file mode 100644 index 0000000..aa909c7 --- /dev/null +++ b/src/theme/element/style.css @@ -0,0 +1,52 @@ +.layer-element{ + border-radius: 4px; + border: 1px solid #ebeef5; + box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); +} +.layer-element .layui-layer-title{ + font-size: 18px; + color: #303133; + background-color: #fff; + border-bottom:none; +} +.layer-element-notice .layui-layer-title{ + font-weight: 700; + font-size: 16px; + color: #303133; + margin: 0; + padding-left:27px; + height: 30px; + border-radius: 16px; +} +.layer-element-notice{ + border-radius: 16px; + border: 1px solid #ebeef5; + box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); +} +.layer-element-notice .layui-layer-content{ + padding: 5px 27px 13px 27px; + font-size: 14px; + line-height: 21px; + color: #606266; + text-align: justify; +} + + + +@-webkit-keyframes +layer-zoomInRight{ + 0% + {opacity:0;-webkit-transform:translateX(400px); + transform: translateX(400px);-webkit-animation-timing-function:linear;animation-timing-function:linear} + 60% + {opacity:1;-webkit-transform: translateX(0); + transform: translateX(0);-webkit-animation-timing-function:linear;animation-timing-function:linear}} +@keyframes +layer-zoomInRight{ + 0% + {opacity:0;-webkit-transform:translateX(400px); + transform: translateX(400px);-webkit-animation-timing-function:linear;animation-timing-function:linear} + 60% + {opacity:1;-webkit-transform: translateX(0); + transform: translateX(0);-webkit-animation-timing-function:linear;animation-timing-function:linear}} + .layer-anim-07{-webkit-animation-name:layer-zoomInRight;animation-name:layer-zoomInRight;animation-duration: 0.8s;-webkit-animation-duration: 0.8s} \ No newline at end of file diff --git a/test/demo.html b/test/demo.html index 4c3f376..fcbb373 100644 --- a/test/demo.html +++ b/test/demo.html @@ -9,8 +9,6 @@