diff --git a/js/lib/layer/Readme.md b/js/lib/layer/Readme.md deleted file mode 100644 index eb0591b..0000000 --- a/js/lib/layer/Readme.md +++ /dev/null @@ -1,13 +0,0 @@ -# layer弹窗组件 -> 以知名弹窗插件layer为参考,基于yua框架进行移植的一个弹窗组件。 - -## 常用方法 -> layer组件本身提供了几种常见的弹窗类型。 - -### layer.alert(msg[,conf]) -+ msg `` -+ conf `` | `` 可选 - -> 该方法为弹出一个普通的`alert`类型的弹窗, 功能类似于原生的`alert`方法,方法返回该弹窗的唯一ID, 该ID用于在其他地方对该弹窗的控制(如关闭)。 -> `msg`为要显示的提示文本, 支持html文本。 -> `conf`为可行参数, 可以一个对象或一个方法, 如果一个方法,则自动为确定和关闭按钮的回调。 \ No newline at end of file diff --git a/js/lib/layer/Release.md b/js/lib/layer/Release.md index 3d3c6d5..ef9aba3 100644 --- a/js/lib/layer/Release.md +++ b/js/lib/layer/Release.md @@ -1,3 +1,9 @@ +v1.0.0-base / 2017-09-20 +================== + + 统一字体图标 + + 精简动画类型 + + 优化样式 + v0.0.4-base / 2017-04-20 ================== + 优化offset的处理 diff --git a/js/lib/layer/base.js b/js/lib/layer/base.js index 5852ce8..a886f91 100644 --- a/js/lib/layer/base.js +++ b/js/lib/layer/base.js @@ -34,65 +34,58 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){ fixed: false, //是否固定不可拖拽 offset: null, //弹窗出来时的坐标, 为数组,可有4个值,依次是 上右下左 btns: ['确定', '取消'], //弹窗的2个按钮的文字 - yes: close, //确定按钮对应的回调 - no: close, //取消按钮对应的回调 + yes: yua.noop, //确定按钮对应的回调 + no: yua.noop, //取消按钮对应的回调 success: null //弹窗初始化完成时的回调 - }; + }, + uuid = function(){ + return 'layer-' + (++lid) + }, + close = function(id){ + if(typeof id !== 'string' && typeof id !== 'number'){ + return yua.error('要关闭的layer实例不存在') + } + if(/^\$wrap\-/.test(id) || layerObj['$wrap-' + id]){ - function uuid(){ - return 'layer-' + (++lid) - } + try { + id = (layerObj['$wrap-' + id] ? '$wrap-' : '') + id; + //未显示过,忽略 + if(!layerObj[id].show){ + return + } + layerObj[id].parentElem.replaceChild(layerObj[id].wrap, layerDom[id][1]) + layerObj[id].wrap.style.display = 'none' + layerObj[id].show = false + }catch(err){} + }else{ + try { + document.body.removeChild(layerDom[id][1]) + document.body.removeChild(layerDom[id][0]) + unique = null + }catch(err){} - function close(id){ - if(typeof id !== 'string' && typeof id !== 'number'){ - return console.error(new Error('要关闭的layer实例不存在')) - } - if(/^\$wrap\-/.test(id) || layerObj['$wrap-' + id]){ - - try { - id = (layerObj['$wrap-' + id] ? '$wrap-' : '') + id; - //未显示过,忽略 - if(!layerObj[id].show){ - return - } - layerObj[id].parentElem.replaceChild(layerObj[id].wrap, layerDom[id][1]) - layerObj[id].wrap.style.display = 'none' - layerObj[id].show = false - - }catch(err){} - }else{ - try { - document.body.removeChild(layerDom[id][1]) - document.body.removeChild(layerDom[id][0]) - unique = null - }catch(err){} - - delete layerDom[id] - delete yua.vmodels[id] - } - - } - - function reapeat(str, num){ - var idx = 0, - result = '' - while(idx < num){ - result += str - idx++ - } - return result - } - - function fixOffset(val){ - if(!val && val !== 0){ - return 'auto' - }else{ - return val - } - } - - var __constructor = function(conf){ + delete layerDom[id] + delete yua.vmodels[id] + } + }, + reapeat = function(str, num){ + var idx = 0, + result = '' + while(idx < num){ + result += str + idx++ + } + return result + }, + fixOffset = function (val){ + if(!val && val !== 0){ + return 'auto' + }else{ + return val + } + }, + __constructor = function(conf){ if(conf){ this.ready(conf).append().show() } @@ -106,7 +99,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){ }else{ conf = {} } - conf.icon = 6 + conf.icon = 5 conf.content = msg return __layer.open(conf) }, @@ -119,7 +112,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){ conf = {} } conf.type = 2 - conf.icon = 8 + conf.icon = 0 conf.content = msg return __layer.open(conf) }, @@ -161,7 +154,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){ }, tips: function(msg, elem, conf){ if(!(elem instanceof HTMLElement)){ - return console.error(new Error('tips类型必须指定一个目标容器')) + return yua.error('tips类型必须指定一个目标容器') } if(typeof conf !== 'object'){ var tmp = conf @@ -194,11 +187,13 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){ } var conf = { type: 3, - icon: 7, prompt: '', title: msg, - content: '', + content: '', yes: function(id){ + if(!yua.vmodels[id].prompt){ + return + } yescb(id, yua.vmodels[id].prompt) } } @@ -242,6 +237,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){ }; + defconf.yes = defconf.no = close /*type: { // 弹窗类型对应的id值 1: 'alert', 2: 'confirm', @@ -300,7 +296,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){ layBox.innerHTML = this.getMenubar() + '
' @@ -350,7 +346,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){ }, //获取窗口内容的图标 getIcon: function(){ - if(this.init.icon === 0){ + if(this.init.icon < 0){ return '' } if(this.init.type < 4 || this.init.type === 5 || this.init.specialMode){ @@ -514,7 +510,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){ }, update: function(val){ if(!val){ - return console.error(new Error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr) + '"]') + return yua.error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr + '"]') } var _this = this, @@ -557,7 +553,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){ tipsCont = document.createElement('div'); - tipsBox.className = 'do-layer skin-def type-5' + tipsBox.className = 'do-layer skin-' + (init.skin || 'def') + ' type-5' tipsBox.style.left = ol + (ew * 0.7) + 'px' if(init.background){ tipsBox.style.background = init.background diff --git a/js/lib/layer/index.html b/js/lib/layer/index.html deleted file mode 100644 index a0526c2..0000000 --- a/js/lib/layer/index.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - -Examples - - - - - - - - alert层 - confirm层 - msg层 - prompt层 - loading层 - - - - - - - - - - - - - \ No newline at end of file diff --git a/js/lib/layer/skin/def.css b/js/lib/layer/skin/def.css index 3e825c3..b231d08 100644 --- a/js/lib/layer/skin/def.css +++ b/js/lib/layer/skin/def.css @@ -1 +1 @@ -.do-layer{position:fixed;left:50%;top:50%;z-index:65535;width:auto;height:auto}.do-layer a{text-decoration:none}.do-layer.skin-def{color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,0.3)}.do-layer.skin-def .icon-1::before{content:"\e610";color:#1abc9c}.do-layer.skin-def .icon-2::before{content:"\e6f8";color:#3498db}.do-layer.skin-def .icon-3::before{content:"\e6fd";color:#f39c12}.do-layer.skin-def .icon-4::before{content:"\e6f6";color:#f39c12}.do-layer.skin-def .icon-5::before{content:"\e630";color:#1abc9c}.do-layer.skin-def .icon-6::before{content:"\e636";color:#34495e}.do-layer.skin-def .icon-7::before{content:"\e623";color:#f39c12}.do-layer.skin-def .icon-8::before{content:"\e604";color:#e74c3c}.do-layer.skin-def .icon-9::before{content:"\e605";color:#1abc9c}.do-layer.skin-def .layer-title{width:100%;height:40px;padding:0 8px;line-height:40px;background:#e7e8eb;font-size:14px;color:#34495e}.do-layer.skin-def .action-min,.do-layer.skin-def .action-close{position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;color:#5d6d7e}.do-layer.skin-def .action-min:hover,.do-layer.skin-def .action-close:hover{border:1px solid #ddd;line-height:18px;color:#1abc9c}.do-layer.skin-def .action-min{right:40px}.do-layer.skin-def .action-min::before{content:"\e634"}.do-layer.skin-def .action-close{right:10px}.do-layer.skin-def .action-close::before{content:"\e687"}.do-layer.skin-def .layer-content{position:relative;width:100%;height:auto;min-height:50px;padding:10px}.do-layer.skin-def .layer-content .msg-icon{position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center}.do-layer.skin-def .layer-content .detail{width:auto;height:100%;margin:auto auto auto 60px;padding:5px 15px;word-break:break-all;word-wrap:break-word}.do-layer.skin-def .layer-content .detail .prompt-value{width:230px;height:30px;padding:0 8px;border:1px solid #ddd;border-radius:3px}.do-layer.skin-def .layer-content .detail .msg-box{line-height:30px}.do-layer.skin-def .layer-content.none-icon .detail{margin:0 auto}.do-layer.skin-def .layer-btns{width:100%;height:40px;padding:0 5px;line-height:28px;font-size:14px;color:#454545;text-align:right}.do-layer.skin-def .layer-btns a{display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;line-height:28px;border:1px solid #ddd;color:#454545;text-align:center;background:#f3f3f3}.do-layer.type-1,.do-layer.type-2,.do-layer.type-3{max-width:600px;min-width:230px}.do-layer.type-5{visibility:hidden;min-width:75px;max-width:600px;line-height:1.5;color:#fff;background:rgba(0,0,0,0.5);opacity:0;box-shadow:none;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.do-layer.type-5.active{visibility:visible;opacity:1}.do-layer.type-5 i.arrow{position:absolute;left:5px;bottom:-14px;width:0;height:0;border:6px solid transparent;border-top:8px solid rgba(0,0,0,0.5);content:""}.do-layer.type-5 .layer-content .detail{margin:0;padding:0}.do-layer.type-6{box-shadow:none;background:transparent}.do-layer.type-unspecial{min-width:10px;background:transparent}.do-layer.type-unspecial .layer-content{min-height:60px;padding:0}.do-layer.type-unspecial .layer-content .detail{margin:0;padding:0}.do-layer .loading-box{position:relative;width:100px;height:100px;margin:auto}.do-layer .loading-box .dot-box{position:absolute;display:block}.do-layer .loading-box.style-1 .dot-box,.do-layer .loading-box.style-2 .dot-box{width:70%;height:70%;margin:15%;-webkit-animation:circle 1.3s infinite linear;-moz-animation:circle 1.3s infinite linear;animation:circle 1.3s infinite linear}.do-layer .loading-box.style-1 .dot-box::after,.do-layer .loading-box.style-2 .dot-box::after{content:"\e648";font:70px/1 "ui font"}.do-layer .loading-box.style-2 .dot-box::after{content:"\e64a"}.do-layer .loading-box.style-3{height:50px}.do-layer .loading-box.style-3 .dot-box{width:100%;height:100%}.do-layer .loading-box.style-3 .dot-box i{float:left;display:block;width:10px;height:100%;margin:0 5px;background:#16a085;-webkit-animation:bounce 1s infinite ease-in-out;-moz-animation:bounce 1s infinite ease-in-out;animation:bounce 1s infinite ease-in-out;-webkit-transform:scaleY(0.6);-moz-transform:scaleY(0.6);transform:scaleY(0.6)}.do-layer .loading-box.style-3 .dot-box i:nth-child(2){-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s}.do-layer .loading-box.style-3 .dot-box i:nth-child(3){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}.do-layer .loading-box.style-3 .dot-box i:nth-child(4){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.do-layer .loading-box.style-3 .dot-box i:nth-child(5){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}.do-layer .loading-box.style-4 .dot-box{width:60%;height:60%;margin:20%}.do-layer .loading-box.style-4 .dot-box i{position:absolute;display:block;width:60px;height:60px;-webkit-animation:circle2 2s infinite ease-in-out;-moz-animation:circle2 2s infinite ease-in-out;animation:circle2 2s infinite ease-in-out;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}.do-layer .loading-box.style-4 .dot-box i::before{display:block;width:8px;height:8px;background:#16a085;border-radius:50%;content:""}.do-layer .loading-box.style-4 .dot-box i:nth-child(2){-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s}.do-layer .loading-box.style-4 .dot-box i:nth-child(3){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}.do-layer .loading-box.style-4 .dot-box i:nth-child(4){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.do-layer .loading-box.style-4 .dot-box i:nth-child(5){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}.do-layer .loading-box.style-5 .dot-box{width:90%;height:90%;margin:5%}.do-layer .loading-box.style-5 .dot-box i{float:left;display:block;width:30px;height:30px;background:#16a085;-webkit-animation:grid 1.5s infinite linear;-moz-animation:grid 1.5s infinite linear;animation:grid 1.5s infinite linear}.do-layer .loading-box.style-5 .dot-box i:nth-child(4),.do-layer .loading-box.style-5 .dot-box i:nth-child(8){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}.do-layer .loading-box.style-5 .dot-box i:nth-child(1),.do-layer .loading-box.style-5 .dot-box i:nth-child(5),.do-layer .loading-box.style-5 .dot-box i:nth-child(9){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.do-layer .loading-box.style-5 .dot-box i:nth-child(2),.do-layer .loading-box.style-5 .dot-box i:nth-child(6){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}.do-layer .loading-box.style-5 .dot-box i:nth-child(3){-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s}.do-layer:active{z-index:65536}.do-layer-cover{position:fixed;left:0;top:0;z-index:65534;width:100%;height:100%;background:rgba(255,255,255,0.05)}.do-layer-cover.type-6{background:rgba(0,0,0,0.3)}@-webkit-keyframes circle{to{-webkit-transform:rotate(360deg)}}@-moz-keyframes circle{to{-moz-transform:rotate(360deg)}}@keyframes circle{to{transform:rotate(360deg)}}@-webkit-keyframes circle2{70%,to{-webkit-transform:rotate(405deg)}}@-moz-keyframes circle2{70%,to{-moz-transform:rotate(405deg)}}@keyframes circle2{70%,to{transform:rotate(405deg)}}@-webkit-keyframes bounce{25%{-webkit-transform:scaleY(1.3)}50%{-webkit-transform:scaleY(0.6)}}@-moz-keyframes bounce{25%{-moz-transform:scaleY(1.3)}50%{-moz-transform:scaleY(0.6)}}@keyframes bounce{25%{transform:scaleY(1.3)}50%{transform:scaleY(0.6)}}@-webkit-keyframes grid{36%{-webkit-transform:scale(0.1);opacity:.3}60%{-webkit-transform:scale(1);opacity:1}}@-moz-keyframes grid{36%{-moz-transform:scale(0.1);opacity:.3}60%{-moz-transform:scale(1);opacity:1}}@keyframes grid{36%{transform:scale(0.1);opacity:.3}60%{transform:scale(1);opacity:1}} +.do-layer{position:fixed;left:50%;top:50%;z-index:65535;width:auto;height:auto}.do-layer a{text-decoration:none}.do-layer.skin-def{color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,0.3)}.do-layer.skin-def .icon-0::before{content:"\e62e";color:#e74c3c}.do-layer.skin-def .icon-1::before{content:"\e610";color:#1abc9c}.do-layer.skin-def .icon-2::before{content:"\e6f8";color:#3498db}.do-layer.skin-def .icon-3::before{content:"\e6fd";color:#f39c12}.do-layer.skin-def .icon-4::before{content:"\e6f6";color:#f39c12}.do-layer.skin-def .icon-5::before{content:"\e630";color:#1abc9c}.do-layer.skin-def .icon-6::before{content:"\e636";color:#34495e}.do-layer.skin-def .icon-7::before{content:"\e623";color:#f39c12}.do-layer.skin-def .icon-8::before{content:"\e604";color:#e74c3c}.do-layer.skin-def .icon-9::before{content:"\e605";color:#1abc9c}.do-layer.skin-def .layer-title{width:100%;height:40px;padding:0 8px;line-height:40px;background:#ecf0f1;font-size:14px;color:#34495e}.do-layer.skin-def .action-min,.do-layer.skin-def .action-close{position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;color:#5d6d7e}.do-layer.skin-def .action-min:hover,.do-layer.skin-def .action-close:hover{border:1px solid #ddd;line-height:18px;color:#1abc9c}.do-layer.skin-def .action-min{right:40px}.do-layer.skin-def .action-min::before{content:"\e634"}.do-layer.skin-def .action-close{right:10px}.do-layer.skin-def .action-close::before{content:"\e687"}.do-layer.skin-def .layer-content{position:relative;width:100%;height:auto;min-height:50px;padding:10px}.do-layer.skin-def .layer-content .msg-icon{position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center}.do-layer.skin-def .layer-content .detail{width:auto;height:100%;margin:auto auto auto 60px;padding:5px 15px;word-break:break-all;word-wrap:break-word}.do-layer.skin-def .layer-content .detail .prompt-value{width:230px;height:30px;padding:0 8px;border:1px solid #ddd;border-radius:3px}.do-layer.skin-def .layer-content .detail .prompt-value.alert{border-color:#e74c3c}.do-layer.skin-def .layer-content .detail .prompt-value:focus{border-color:#1abc9c}.do-layer.skin-def .layer-content .detail .msg-box{line-height:30px}.do-layer.skin-def .layer-content.none-icon .detail{margin:0 auto}.do-layer.skin-def .layer-btns{width:100%;height:40px;padding:0 5px;line-height:30px;font-size:14px;color:#454545;text-align:right}.do-layer.skin-def .layer-btns a{display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;color:#34495e;text-align:center;background:#e7e8eb}.do-layer.skin-def .layer-btns a:hover{background:#ecf0f1}.do-layer.skin-def .layer-btns a:active{background:#bdc3c7}.do-layer.type-1,.do-layer.type-2,.do-layer.type-3{max-width:600px;min-width:230px}.do-layer.type-5{visibility:hidden;min-width:75px;max-width:600px;line-height:1.5;color:#fff;background:rgba(0,0,0,0.5);opacity:0;box-shadow:none;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.do-layer.type-5.active{visibility:visible;opacity:1}.do-layer.type-5 i.arrow{position:absolute;left:5px;bottom:-14px;width:0;height:0;border:6px solid transparent;border-top:8px solid rgba(0,0,0,0.5);content:""}.do-layer.type-5 .layer-content .detail{margin:0;padding:0}.do-layer.type-6{box-shadow:none;background:transparent}.do-layer.type-unspecial{min-width:10px;background:transparent}.do-layer.type-unspecial .layer-content{min-height:60px;padding:0}.do-layer.type-unspecial .layer-content .detail{margin:0;padding:0}.do-layer .loading-box{position:relative;width:100px;height:100px;margin:auto}.do-layer .loading-box .dot-box{position:absolute;display:block}.do-layer .loading-box.style-1 .dot-box,.do-layer .loading-box.style-2 .dot-box{width:70%;height:70%;margin:15%;-webkit-animation:circle 1.3s infinite linear;-moz-animation:circle 1.3s infinite linear;animation:circle 1.3s infinite linear}.do-layer .loading-box.style-1 .dot-box::after,.do-layer .loading-box.style-2 .dot-box::after{content:"\e648";font:70px/1 "ui font"}.do-layer .loading-box.style-2 .dot-box::after{content:"\e64a"}.do-layer .loading-box.style-3{height:50px}.do-layer .loading-box.style-3 .dot-box{width:100%;height:100%}.do-layer .loading-box.style-3 .dot-box i{float:left;display:block;width:10px;height:100%;margin:0 5px;background:#16a085;-webkit-animation:bounce 1s infinite ease-in-out;-moz-animation:bounce 1s infinite ease-in-out;animation:bounce 1s infinite ease-in-out;-webkit-transform:scaleY(0.6);-moz-transform:scaleY(0.6);transform:scaleY(0.6)}.do-layer .loading-box.style-3 .dot-box i:nth-child(2){-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s}.do-layer .loading-box.style-3 .dot-box i:nth-child(3){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}.do-layer .loading-box.style-3 .dot-box i:nth-child(4){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.do-layer .loading-box.style-3 .dot-box i:nth-child(5){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}.do-layer .loading-box.style-4 .dot-box{width:60%;height:60%;margin:20%}.do-layer .loading-box.style-4 .dot-box i{position:absolute;display:block;width:60px;height:60px;-webkit-animation:circle2 2s infinite ease-in-out;-moz-animation:circle2 2s infinite ease-in-out;animation:circle2 2s infinite ease-in-out;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}.do-layer .loading-box.style-4 .dot-box i::before{display:block;width:8px;height:8px;background:#16a085;border-radius:50%;content:""}.do-layer .loading-box.style-4 .dot-box i:nth-child(2){-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s}.do-layer .loading-box.style-4 .dot-box i:nth-child(3){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}.do-layer .loading-box.style-4 .dot-box i:nth-child(4){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.do-layer .loading-box.style-4 .dot-box i:nth-child(5){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}.do-layer .loading-box.style-5 .dot-box{width:90%;height:90%;margin:5%}.do-layer .loading-box.style-5 .dot-box i{float:left;display:block;width:30px;height:30px;background:#16a085;-webkit-animation:grid 1.5s infinite linear;-moz-animation:grid 1.5s infinite linear;animation:grid 1.5s infinite linear}.do-layer .loading-box.style-5 .dot-box i:nth-child(4),.do-layer .loading-box.style-5 .dot-box i:nth-child(8){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}.do-layer .loading-box.style-5 .dot-box i:nth-child(1),.do-layer .loading-box.style-5 .dot-box i:nth-child(5),.do-layer .loading-box.style-5 .dot-box i:nth-child(9){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.do-layer .loading-box.style-5 .dot-box i:nth-child(2),.do-layer .loading-box.style-5 .dot-box i:nth-child(6){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}.do-layer .loading-box.style-5 .dot-box i:nth-child(3){-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s}.do-layer:active{z-index:65536}.do-layer-cover{position:fixed;left:0;top:0;z-index:65534;width:100%;height:100%;background:rgba(255,255,255,0.05)}.do-layer-cover.type-6{background:rgba(0,0,0,0.3)}@-webkit-keyframes circle{to{-webkit-transform:rotate(360deg)}}@-moz-keyframes circle{to{-moz-transform:rotate(360deg)}}@keyframes circle{to{transform:rotate(360deg)}}@-webkit-keyframes circle2{70%,to{-webkit-transform:rotate(405deg)}}@-moz-keyframes circle2{70%,to{-moz-transform:rotate(405deg)}}@keyframes circle2{70%,to{transform:rotate(405deg)}}@-webkit-keyframes bounce{25%{-webkit-transform:scaleY(1.3)}50%{-webkit-transform:scaleY(0.6)}}@-moz-keyframes bounce{25%{-moz-transform:scaleY(1.3)}50%{-moz-transform:scaleY(0.6)}}@keyframes bounce{25%{transform:scaleY(1.3)}50%{transform:scaleY(0.6)}}@-webkit-keyframes grid{36%{-webkit-transform:scale(0.1);opacity:.3}60%{-webkit-transform:scale(1);opacity:1}}@-moz-keyframes grid{36%{-moz-transform:scale(0.1);opacity:.3}60%{-moz-transform:scale(1);opacity:1}}@keyframes grid{36%{transform:scale(0.1);opacity:.3}60%{transform:scale(1);opacity:1}} diff --git a/js/lib/layer/skin/def.scss b/js/lib/layer/skin/def.scss index 073c878..453f78e 100644 --- a/js/lib/layer/skin/def.scss +++ b/js/lib/layer/skin/def.scss @@ -16,6 +16,7 @@ /* 默认皮肤 */ &.skin-def {color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,.3); + .icon-0::before {content:"\e62e";color:nth($cr, 1);} // question .icon-1::before {content:"\e610";color:nth($cg, 1);} // get .icon-2::before {content:"\e6f8";color:nth($cb, 1);} // happy .icon-3::before {content:"\e6fd";color:nth($co, 1);} // sad @@ -28,7 +29,7 @@ /* 弹层标题栏 */ - .layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:nth($cp, 1);font-size:14px;color:nth($cgr, 1);} + .layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:nth($cp, 2);font-size:14px;color:nth($cgr, 1);} .action-min, .action-close {position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;color:nth($cgr, 2); @@ -48,7 +49,11 @@ .msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center;} .detail {width:auto;height:100%;margin:auto auto auto 60px;padding:5px 15px;word-break:break-all;word-wrap: break-word; - .prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;} + .prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px; + + &.alert {border-color:nth($cr, 1)} + &:focus {border-color:nth($cg, 1)} + } .msg-box {line-height:30px;} } @@ -57,9 +62,13 @@ /* 弹层按钮部分 */ - .layer-btns {width:100%;height:40px;padding:0 5px;line-height:28px;font-size:14px;color:#454545;text-align:right; + .layer-btns {width:100%;height:40px;padding:0 5px;line-height:30px;font-size:14px;color:#454545;text-align:right; - a {display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;line-height:28px;border:1px solid #ddd;color:#454545;text-align:center;background:#f3f3f3;} + a {display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;color:nth($cgr, 1);text-align:center;background:nth($cp, 1); + + &:hover {background:nth($cp, 2)} + &:active {background:nth($cp, 3)} + } } }