From 808fd240c331e2eb58a7263bf3d3b3a2a638176a Mon Sep 17 00:00:00 2001 From: fanyushun <723107234@qq.com> Date: Wed, 31 Oct 2018 20:23:27 +0800 Subject: [PATCH] =?UTF-8?q?loading=20=E5=A2=9E=E5=8A=A0=E5=A4=9A=E7=A7=8D?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 8 +++++++- dist/mobile/layer.js | 2 +- dist/mobile/need/layer.css | 2 +- index.html | 27 ++++++++++++++++++++++++++- src/mobile/layer.js | 15 ++++++++++----- src/mobile/need/layer.css | 16 ++++++++++++---- 6 files changed, 57 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 4a608f5..54e96fb 100644 --- a/README.md +++ b/README.md @@ -15,4 +15,10 @@ layer致力于打造国内最盛行的弹层组件，为web开发提供强劲动 ## 二次开发 主要是对移动版的 `layer` 增加一些自己需要的功能，[点击体验](https://fxss5201.github.io/layer/)： - 1. loading 增加一种新的样式，只需要在原有的 `layer.open` 基础上参数上设置 `loadingType: 1` 就可以调用新的 loading 样式 \ No newline at end of file + 1. loading 增加了多种新的样式，只需要在原有的 `layer.open` 基础上参数上设置 `loadingType` 参数就可以调用新的 loading 样式 + * `loadingType: 1`：全页面的新 loading + * `loadingType: 2`：全页面的 loading 成功样式 + * `loadingType: 3`：全页面的 loading 失败样式 + * `loadingType: 4`：小区域的新 loading + * `loadingType: 5`：小区域的 loading 成功样式 + * `loadingType: 6`：小区域的 loading 失败样式 \ No newline at end of file diff --git a/dist/mobile/layer.js b/dist/mobile/layer.js index 3a5465f..87d189a 100644 --- a/dist/mobile/layer.js +++ b/dist/mobile/layer.js @@ -1,2 +1,2 @@ /*! layer mobile-v2.0.0 Web弹层组件 MIT License http://layer.layui.com/mobile By 贤心 */ - ;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},l={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale",loadingType:0},s={extend:function(e){var t=JSON.parse(JSON.stringify(l));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};s.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],d=function(e){var t=this;t.config=s.extend(e),t.view()};d.prototype.view=function(){var e=this,n=e.config,l=t.createElement("div");e.id=l.id=o[0]+r,l.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),l.setAttribute("index",r);var s=function(){var e="object"==typeof n.title;return n.title?'

'+(e?n.title[0]:n.title)+"

":""}(),d=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e=''+n.btn[0]+"",2===t&&(e=''+n.btn[1]+""+e),'
'+e+"
"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(0===n.loadingType?n.content='

'+(n.content||"")+"

":1===n.loadingType&&(n.content='

'+(n.content||"")+"

")),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),l.innerHTML=(n.shade?"
':"")+'
"+s+'
'+n.content+"
"+d+"
",!n.type||2===n.type){var c=t[i](o[0]+n.type),y=c.length;y>=1&&layer.close(c[0].getAttribute("index"))}document.body.appendChild(l);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},d.prototype.action=function(e,t){var n=this;e.time&&(s.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var l=t[i]("layui-m-layerbtn")[0].children,r=l.length,o=0;o'+(e?n.title[0]:n.title)+"":""}(),d=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e=''+n.btn[0]+"",2===t&&(e=''+n.btn[1]+""+e),'
'+e+"
"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type)if(0===n.loadingType)n.content='

'+(n.content||"")+"

";else{var y="";(1===n.loadingType||4===n.loadingType)&&(y="layui-m-layerload-type1"),(2===n.loadingType||5===n.loadingType)&&(y="layui-m-layerload-type2"),(3===n.loadingType||6===n.loadingType)&&(y="layui-m-layerload-type3"),n.content='

'+(n.content||"")+"

"}if(n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),l.innerHTML=(n.shade?"
':"")+'
3?"layui-m-layerchild-transparent":"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+s+'
'+n.content+"
"+d+"
",!n.type||2===n.type){var c=t[i](o[0]+n.type),u=c.length;u>=1&&layer.close(c[0].getAttribute("index"))}document.body.appendChild(l);var p=e.elem=a("#"+e.id)[0];n.success&&n.success(p),e.index=r++,e.action(n,p)},d.prototype.action=function(e,t){var n=this;e.time&&(s.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var l=t[i]("layui-m-layerbtn")[0].children,r=l.length,o=0;odiv{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layui-m-layerbtn{display:box;display:-moz-box;display:-webkit-box;width:100%;height:50px;line-height:50px;font-size:0;border-top:1px solid #D0D0D0;background-color:#F2F2F2}.layui-m-layerbtn span{display:block;-moz-box-flex:1;box-flex:1;-webkit-box-flex:1;font-size:14px;cursor:pointer}.layui-m-layerbtn span[yes]{color:#40AFFE}.layui-m-layerbtn span[no]{border-right:1px solid #D0D0D0;border-radius:0 0 0 5px}.layui-m-layerbtn span:active{background-color:#F6F6F6}.layui-m-layerend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layui-m-layerend::after,.layui-m-layerend::before{position:absolute;left:5px;top:15px;content:'';width:18px;height:1px;background-color:#999;transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layui-m-layerend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}body .layui-m-layer .layui-m-layer-footer{position:fixed;width:95%;max-width:100%;margin:0 auto;left:0;right:0;bottom:10px;background:0 0}.layui-m-layer-footer .layui-m-layercont{padding:20px;border-radius:5px 5px 0 0;background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn{display:block;height:auto;background:0 0;border-top:none}.layui-m-layer-footer .layui-m-layerbtn span{background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn span[no]{color:#FD482C;border-top:1px solid #c2c2c2;border-radius:0 0 5px 5px}.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top:10px;border-radius:5px}body .layui-m-layer .layui-m-layer-msg{width:auto;max-width:90%;margin:0 auto;bottom:-150px;background-color:rgba(0,0,0,.7);color:#fff}.layui-m-layer-msg .layui-m-layercont{padding:10px 20px} \ No newline at end of file +.layui-m-layer{position:relative;z-index:19891014}.layui-m-layer *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.layui-m-layermain,.layui-m-layershade{position:fixed;left:0;top:0;width:100%;height:100%}.layui-m-layershade{background-color:rgba(0,0,0,.7);pointer-events:auto}.layui-m-layershade-transparent{background-color:rgba(0,0,0,0)}.layui-m-layermain{display:table;font-family:Helvetica,arial,sans-serif;pointer-events:none}.layui-m-layermain .layui-m-layersection{display:table-cell;vertical-align:middle;text-align:center}.layui-m-layerchild{position:relative;display:inline-block;text-align:left;background-color:#fff;font-size:14px;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;-webkit-overflow-scrolling:touch;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.2s;animation-duration:.2s}@-webkit-keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.layui-m-anim-scale{animation-name:layui-m-anim-scale;-webkit-animation-name:layui-m-anim-scale}@-webkit-keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.layui-m-anim-up{-webkit-animation-name:layui-m-anim-up;animation-name:layui-m-anim-up}.layui-m-layer0 .layui-m-layerchild{width:90%;max-width:640px}.layui-m-layer1 .layui-m-layerchild{border:none;border-radius:0}.layui-m-layer2 .layui-m-layerchild{width:auto;max-width:260px;min-width:40px;border:none;background:0 0;box-shadow:none;color:#fff}.layui-m-layer2 .layui-m-layerchild-transparent{padding:25px;background-color:rgba(0,0,0,.6);border-radius:5px}.layui-m-layerchild h3{padding:0 10px;height:60px;line-height:60px;font-size:16px;font-weight:400;border-radius:5px 5px 0 0;text-align:center}.layui-m-layerbtn span,.layui-m-layerchild h3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layui-m-layercont{padding:50px 30px;line-height:22px;text-align:center}.layui-m-layer1 .layui-m-layercont{padding:0;text-align:left}.layui-m-layer2 .layui-m-layercont{text-align:center;padding:0;line-height:0}.layui-m-layer2 .layui-m-layercont i{width:36px;height:36px;display:inline-block;background-color:#fff;border-radius:100%}.layui-m-layerbtn,.layui-m-layerbtn span{position:relative;text-align:center;border-radius:0 0 5px 5px}.layui-m-layer2 .layui-m-layercont p{margin-top:20px}@-webkit-keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@-webkit-keyframes layui-m-anim-loading1{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes layui-m-anim-loading1{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.layui-m-layer2 .layui-m-layercont i.layui-m-layerload-default{width:25px;height:25px;margin-left:8px;-webkit-animation:layui-m-anim-loading 1.4s infinite ease-in-out;animation:layui-m-anim-loading 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.layui-m-layer2 .layui-m-layercont i.layui-m-layerload-default:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay:-.16s;animation-delay:-.16s}.layui-m-layer2 .layui-m-layercont i.layui-m-layerload-type1{vertical-align:middle;-webkit-animation:layui-m-anim-loading1 1s steps(12) infinite;animation:layui-m-anim-loading1 1s steps(12) infinite;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;background-size:100%}.layui-m-layer2 .layui-m-layercont i.layui-m-layerload-type2{vertical-align:middle;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTQwOTg1MzUwNzk2IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc0MyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik01MTIgMi4yNzU1NTU1NUMyMzAuNTU5Mjg4ODkgMi4yNzU1NTU1NSAyLjI3NTU1NTU1IDIzMC41NTkyODg4OSAyLjI3NTU1NTU1IDUxMnMyMjguMjgzNzMzMzMgNTA5LjcyNDQ0NDQ1IDUwOS43MjQ0NDQ0NSA1MDkuNzI0NDQ0NDUgNTA5LjcyNDQ0NDQ1LTIyOC4yODM3MzMzMyA1MDkuNzI0NDQ0NDUtNTA5LjcyNDQ0NDQ1Uzc5My40NDA3MTExMSAyLjI3NTU1NTU1IDUxMiAyLjI3NTU1NTU1TDUxMiAyLjI3NTU1NTU1ek00MjcuMDIxNjUzMzMgNzY2Ljg2MjIyMjIyTDE3Mi4xNTk0MzExMSA1MTIgMjU3LjEzNzc3Nzc4IDQyNy4wMjE2NTMzM2wxNjkuODgzODc1NTUgMTY5Ljk1NjY5MzM0TDc2Ni44NjIyMjIyMiAyNTcuMTM3Nzc3NzhsODQuOTc4MzQ2NjcgODQuOTc4MzQ2NjdMNDI3LjAyMTY1MzMzIDc2Ni44NjIyMjIyMiA0MjcuMDIxNjUzMzMgNzY2Ljg2MjIyMjIyek00MjcuMDIxNjUzMzMgNzY2Ljg2MjIyMjIyIiBmaWxsPSIjMDBhZTY2IiBwLWlkPSI3NDQiPjwvcGF0aD48L3N2Zz4=) no-repeat;background-size:100%}.layui-m-layer2 .layui-m-layercont i.layui-m-layerload-type3{vertical-align:middle;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTQwOTg1MjE3MDMxIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc0MSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik01MTEuNDAxNTUyNzggMS4yNDcwNDY1NGMtMjgxLjY3MDkxNjU1IDAtNTEwLjAwODk2ODUzIDIyOC4zMzkyMTcwNy01MTAuMDA4OTY4NTMgNTEwLjAwODk2ODUzczIyOC4zMzkyMTcwNyA1MTAuMDA4OTY4NTMgNTEwLjAwODk2ODUzIDUxMC4wMDg5Njg1NCA1MTAuMDA4OTY4NTMtMjI4LjMzOTIxNzA3IDUxMC4wMDg5Njg1My01MTAuMDA4OTY4NTRTNzkzLjA3MTMwNDI1IDEuMjQ3MDQ2NTQgNTExLjQwMTU1Mjc4IDEuMjQ3MDQ2NTR6TTUwOS42NzE0MTAzNSA4NzUuNDcxOTU4NDdjLTQxLjkyMjc3MTYzIDAtNzUuOTA4NTQ0MjktMzMuOTg1NzcyNjYtNzUuOTA4NTQ0MjktNzUuOTA4NTQ0MjhzMzMuOTg1NzcyNjYtNzUuOTA4NTQ0MjkgNzUuOTA4NTQ0MjktNzUuOTA4NTQ0MjljNDEuOTIyNzcxNjMgMCA3NS45MDg1NDQyOSAzMy45ODU3NzI2NiA3NS45MDg1NDQyOCA3NS45MDg1NDQyOVM1NTEuNTk0MTgxOTcgODc1LjQ3MTk1ODQ3IDUwOS42NzE0MTAzNSA4NzUuNDcxOTU4NDd6TTU3Mi45MzEwNTI2NiA1ODkuMDA2NDc0ODFjMCAzLjE2NTcxODc1LTAuNDYxMDYwNTUgNi4yMjc4MTQ0LTEuMzAyODQ2NTggOS4xMzE1NjY2NS0xLjgxMDQ3ODY1IDMyLjc1NzQ0MTQyLTI4Ljk0MDg4MTkyIDU4Ljc2NTQ2NDQ2LTYyLjE1MTIzMzk5IDU4Ljc2NTQ2NDQ2cy02MC4zNDA3NTUzNC0yNi4wMDY4NTkwOS02Mi4xNTEyMzM5OS01OC43NjU0NjQ0NmMtMC44NDE3ODQ4OS0yLjkwMzc1MjI1LTEuMzAyODQ2NTgtNS45NjU4NDc4OS0xLjMwMjg0NjU4LTkuMTMxNTY2NjVsLTM0LjkyODg1MTYzLTI4My4xMDI5OTg3NmMwLTU0LjExMDYxMzA1IDQ0LjI3MjMxOTE1LTk4LjM4MjkzMjE5IDk4LjM4MjkzMjItOTguMzgyOTMyMTlsMCAwYzU0LjExMDYxMzA1IDAgOTguMzgyOTMyMTkgNDQuMjcyMzE5MTUgOTguMzgyOTMyMiA5OC4zODI5MzIxOUw1NzIuOTMxMDUyNjYgNTg5LjAwNjQ3NDgxeiIgZmlsbD0iI0ZGNTcyMiIgcC1pZD0iNzQyIj48L3BhdGg+PC9zdmc+) no-repeat;background-size:100%}.layui-m-layer2 .layui-m-layercont>div{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layui-m-layerbtn{display:box;display:-moz-box;display:-webkit-box;width:100%;height:50px;line-height:50px;font-size:0;border-top:1px solid #D0D0D0;background-color:#F2F2F2}.layui-m-layerbtn span{display:block;-moz-box-flex:1;box-flex:1;-webkit-box-flex:1;font-size:14px;cursor:pointer}.layui-m-layerbtn span[yes]{color:#40AFFE}.layui-m-layerbtn span[no]{border-right:1px solid #D0D0D0;border-radius:0 0 0 5px}.layui-m-layerbtn span:active{background-color:#F6F6F6}.layui-m-layerend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layui-m-layerend::after,.layui-m-layerend::before{position:absolute;left:5px;top:15px;content:'';width:18px;height:1px;background-color:#999;transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layui-m-layerend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}body .layui-m-layer .layui-m-layer-footer{position:fixed;width:95%;max-width:100%;margin:0 auto;left:0;right:0;bottom:10px;background:0 0}.layui-m-layer-footer .layui-m-layercont{padding:20px;border-radius:5px 5px 0 0;background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn{display:block;height:auto;background:0 0;border-top:none}.layui-m-layer-footer .layui-m-layerbtn span{background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn span[no]{color:#FD482C;border-top:1px solid #c2c2c2;border-radius:0 0 5px 5px}.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top:10px;border-radius:5px}body .layui-m-layer .layui-m-layer-msg{width:auto;max-width:90%;margin:0 auto;bottom:-150px;background-color:rgba(0,0,0,.7);color:#fff}.layui-m-layer-msg .layui-m-layercont{padding:10px 20px} \ No newline at end of file diff --git a/index.html b/index.html index 6455771..87df30e 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,9 @@ h1 { font-size: 16px; } + h2 { + font-size: 14px; + } .btn { margin: 0 10px 10px 0; padding: 0 18px; @@ -33,12 +36,19 @@ border-radius: 5px; cursor: pointer; } +

点击下面的按钮体验新功能：

+

加载：

layer原有的loading
-
新添加的loading
+
loadingType: 1
+
loadingType: 2
+
loadingType: 3
+
loadingType: 4
+
loadingType: 5
+
loadingType: 6
diff --git a/src/mobile/layer.js b/src/mobile/layer.js index 0e33984..d8c5ac4 100644 --- a/src/mobile/layer.js +++ b/src/mobile/layer.js @@ -84,21 +84,26 @@ Layer.prototype.view = function(){ config.style += ' top:'+ ( doc.body.scrollTop + config.top) + 'px'; } + // 加载区域 if(config.type === 2){ if(config.loadingType === 0){ - config.content = '

'+ (config.content||'') +'

'; - }else if(config.loadingType === 1){ - config.content = '

'+ (config.content||'') +'

'; + config.content = '

'+ (config.content||'') +'

'; + }else{ + var loadingClass = ''; + (config.loadingType === 1 || config.loadingType === 4) && (loadingClass = 'layui-m-layerload-type1'); + (config.loadingType === 2 || config.loadingType === 5) && (loadingClass = 'layui-m-layerload-type2'); + (config.loadingType === 3 || config.loadingType === 6) && (loadingClass = 'layui-m-layerload-type3'); + config.content = '

'+ (config.content||'') +'

'; } } if(config.skin) config.anim = 'up'; if(config.skin === 'msg') config.shade = false; - layerbox.innerHTML = (config.shade ? '
' : '') + layerbox.innerHTML = (config.shade ? '
' : '') +'
' +'
' - +'
' + +'
' + title +'
'+ config.content +'
' + button diff --git a/src/mobile/need/layer.css b/src/mobile/need/layer.css index 3f10b9f..70e7736 100644 --- a/src/mobile/need/layer.css +++ b/src/mobile/need/layer.css @@ -8,6 +8,7 @@ .layui-m-layershade, .layui-m-layermain{position:fixed; left:0; top:0; width:100%; height:100%;} .layui-m-layershade{background-color:rgba(0,0,0, .7); pointer-events:auto;} +.layui-m-layershade-transparent{background-color:rgba(0,0,0,0);} .layui-m-layermain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;} .layui-m-layermain .layui-m-layersection{display:table-cell; vertical-align:middle; text-align:center;} .layui-m-layerchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); pointer-events:auto; -webkit-overflow-scrolling: touch;} @@ -39,13 +40,14 @@ .layui-m-layer0 .layui-m-layerchild{width: 90%; max-width: 640px;} .layui-m-layer1 .layui-m-layerchild{border:none; border-radius:0;} .layui-m-layer2 .layui-m-layerchild{width:auto; max-width:260px; min-width:40px; border:none; background: none; box-shadow: none; color:#fff;} +.layui-m-layer2 .layui-m-layerchild-transparent{padding: 25px;background-color: rgba(0,0,0,0.6);border-radius: 5px;} .layui-m-layerchild h3{padding: 0 10px; height: 60px; line-height: 60px; font-size:16px; font-weight: 400; border-radius: 5px 5px 0 0; text-align: center;} .layui-m-layerchild h3, .layui-m-layerbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} .layui-m-layercont{padding: 50px 30px; line-height: 22px; text-align:center;} .layui-m-layer1 .layui-m-layercont{padding:0; text-align:left;} .layui-m-layer2 .layui-m-layercont{text-align:center; padding: 0; line-height: 0;} -.layui-m-layer2 .layui-m-layercont i{width:25px; height:25px; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;} +.layui-m-layer2 .layui-m-layercont i{width:36px; height:36px; display:inline-block; background-color:#fff; border-radius:100%;} .layui-m-layer2 .layui-m-layercont p{margin-top: 20px;} /* loadingType: 0 */ @@ -66,13 +68,19 @@ 0%{-webkit-transform: rotate(0deg);transform: rotate(0deg)} 100%{-webkit-transform: rotate(1turn);transform: rotate(1turn)} } -.layui-m-layer2 .layui-m-layercont i{-webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out; animation: layui-m-anim-loading 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;} +.layui-m-layer2 .layui-m-layercont i.layui-m-layerload-default{width:25px; height:25px;margin-left:8px;-webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out; animation: layui-m-anim-loading 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;} -.layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;} +.layui-m-layer2 .layui-m-layercont i.layui-m-layerload-default:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;} .layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay: -.16s; animation-delay: -.16s;} -.layui-m-layer2 .layui-m-layercont i.layui-m-layerload1{width: 36px;height: 36px;display: inline-block;vertical-align: middle;-webkit-animation: layui-m-anim-loading1 1s steps(12) infinite;animation: layui-m-anim-loading1 1s steps(12) infinite; +.layui-m-layer2 .layui-m-layercont i.layui-m-layerload-type1{vertical-align: middle;-webkit-animation: layui-m-anim-loading1 1s steps(12) infinite;animation: layui-m-anim-loading1 1s steps(12) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat; background-size: 100%} +.layui-m-layer2 .layui-m-layercont i.layui-m-layerload-type2{vertical-align: middle; + background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTQwOTg1MzUwNzk2IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc0MyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik01MTIgMi4yNzU1NTU1NUMyMzAuNTU5Mjg4ODkgMi4yNzU1NTU1NSAyLjI3NTU1NTU1IDIzMC41NTkyODg4OSAyLjI3NTU1NTU1IDUxMnMyMjguMjgzNzMzMzMgNTA5LjcyNDQ0NDQ1IDUwOS43MjQ0NDQ0NSA1MDkuNzI0NDQ0NDUgNTA5LjcyNDQ0NDQ1LTIyOC4yODM3MzMzMyA1MDkuNzI0NDQ0NDUtNTA5LjcyNDQ0NDQ1Uzc5My40NDA3MTExMSAyLjI3NTU1NTU1IDUxMiAyLjI3NTU1NTU1TDUxMiAyLjI3NTU1NTU1ek00MjcuMDIxNjUzMzMgNzY2Ljg2MjIyMjIyTDE3Mi4xNTk0MzExMSA1MTIgMjU3LjEzNzc3Nzc4IDQyNy4wMjE2NTMzM2wxNjkuODgzODc1NTUgMTY5Ljk1NjY5MzM0TDc2Ni44NjIyMjIyMiAyNTcuMTM3Nzc3NzhsODQuOTc4MzQ2NjcgODQuOTc4MzQ2NjdMNDI3LjAyMTY1MzMzIDc2Ni44NjIyMjIyMiA0MjcuMDIxNjUzMzMgNzY2Ljg2MjIyMjIyek00MjcuMDIxNjUzMzMgNzY2Ljg2MjIyMjIyIiBmaWxsPSIjMDBhZTY2IiBwLWlkPSI3NDQiPjwvcGF0aD48L3N2Zz4=) no-repeat; + background-size: 100%} +.layui-m-layer2 .layui-m-layercont i.layui-m-layerload-type3{vertical-align: middle; + background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTQwOTg1MjE3MDMxIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc0MSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik01MTEuNDAxNTUyNzggMS4yNDcwNDY1NGMtMjgxLjY3MDkxNjU1IDAtNTEwLjAwODk2ODUzIDIyOC4zMzkyMTcwNy01MTAuMDA4OTY4NTMgNTEwLjAwODk2ODUzczIyOC4zMzkyMTcwNyA1MTAuMDA4OTY4NTMgNTEwLjAwODk2ODUzIDUxMC4wMDg5Njg1NCA1MTAuMDA4OTY4NTMtMjI4LjMzOTIxNzA3IDUxMC4wMDg5Njg1My01MTAuMDA4OTY4NTRTNzkzLjA3MTMwNDI1IDEuMjQ3MDQ2NTQgNTExLjQwMTU1Mjc4IDEuMjQ3MDQ2NTR6TTUwOS42NzE0MTAzNSA4NzUuNDcxOTU4NDdjLTQxLjkyMjc3MTYzIDAtNzUuOTA4NTQ0MjktMzMuOTg1NzcyNjYtNzUuOTA4NTQ0MjktNzUuOTA4NTQ0MjhzMzMuOTg1NzcyNjYtNzUuOTA4NTQ0MjkgNzUuOTA4NTQ0MjktNzUuOTA4NTQ0MjljNDEuOTIyNzcxNjMgMCA3NS45MDg1NDQyOSAzMy45ODU3NzI2NiA3NS45MDg1NDQyOCA3NS45MDg1NDQyOVM1NTEuNTk0MTgxOTcgODc1LjQ3MTk1ODQ3IDUwOS42NzE0MTAzNSA4NzUuNDcxOTU4NDd6TTU3Mi45MzEwNTI2NiA1ODkuMDA2NDc0ODFjMCAzLjE2NTcxODc1LTAuNDYxMDYwNTUgNi4yMjc4MTQ0LTEuMzAyODQ2NTggOS4xMzE1NjY2NS0xLjgxMDQ3ODY1IDMyLjc1NzQ0MTQyLTI4Ljk0MDg4MTkyIDU4Ljc2NTQ2NDQ2LTYyLjE1MTIzMzk5IDU4Ljc2NTQ2NDQ2cy02MC4zNDA3NTUzNC0yNi4wMDY4NTkwOS02Mi4xNTEyMzM5OS01OC43NjU0NjQ0NmMtMC44NDE3ODQ4OS0yLjkwMzc1MjI1LTEuMzAyODQ2NTgtNS45NjU4NDc4OS0xLjMwMjg0NjU4LTkuMTMxNTY2NjVsLTM0LjkyODg1MTYzLTI4My4xMDI5OTg3NmMwLTU0LjExMDYxMzA1IDQ0LjI3MjMxOTE1LTk4LjM4MjkzMjE5IDk4LjM4MjkzMjItOTguMzgyOTMyMTlsMCAwYzU0LjExMDYxMzA1IDAgOTguMzgyOTMyMTkgNDQuMjcyMzE5MTUgOTguMzgyOTMyMiA5OC4zODI5MzIxOUw1NzIuOTMxMDUyNjYgNTg5LjAwNjQ3NDgxeiIgZmlsbD0iI0ZGNTcyMiIgcC1pZD0iNzQyIj48L3BhdGg+PC9zdmc+) no-repeat; + background-size: 100%} .layui-m-layer2 .layui-m-layercont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;} .layui-m-layerbtn{display: box; display: -moz-box; display: -webkit-box; width: 100%; position:relative; height: 50px; line-height: 50px; font-size: 0; text-align:center; border-top:1px solid #D0D0D0; background-color: #F2F2F2; border-radius: 0 0 5px 5px;} .layui-m-layerbtn span{position:relative; display: block; -moz-box-flex: 1; box-flex: 1; -webkit-box-flex: 1; text-align:center; font-size:14px; border-radius: 0 0 5px 5px; cursor:pointer;}