mirror of https://github.com/layui/layer
loadingType: 1/4的时候不用设置anim: false，但是此时设置anim无效
fanyushun
parent
e66663b648
commit
980fadcc65
|
|
@ -16,9 +16,9 @@ layer致力于打造国内最盛行的弹层组件，为web开发提供强劲动
|
|||
## 二次开发
|
||||
主要是对移动版的 `layer` 增加一些自己需要的功能，[点击体验](https://fxss5201.github.io/layer/)：
|
||||
1. loading 增加了多种新的样式，只需要在原有的 `layer.open` 基础上参数上设置 `loadingType` 参数就可以调用新的 loading 样式
|
||||
* `loadingType: 1`：全页面的新 loading，引用此请设置 `anim: false`，否则会导致 loading 向左移动一下
|
||||
* `loadingType: 1`：全页面的新 loading，引用此设置参数 `anim` 无效
|
||||
* `loadingType: 2`：全页面的 loading 成功样式
|
||||
* `loadingType: 3`：全页面的 loading 失败样式
|
||||
* `loadingType: 4`：小区域的新 loading，引用此请设置 `anim: false`，否则会导致 loading 向左移动一下
|
||||
* `loadingType: 4`：小区域的新 loading，引用此设置参数 `anim` 无效
|
||||
* `loadingType: 5`：小区域的 loading 成功样式
|
||||
* `loadingType: 6`：小区域的 loading 失败样式
|
||||
|
|
@ -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?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),d=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();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='<i class="layui-m-layerload-default"></i><i class="layui-m-layerload-default layui-m-layerload"></i><i class="layui-m-layerload-default"></i><p>'+(n.content||"")+"</p>";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='<i class="'+y+'"></i><p>'+(n.content||"")+"</p>"}if(n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),l.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade '+(n.loadingType>3?"layui-m-layershade-transparent":"")+'"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+" "+(n.loadingType>3?"layui-m-layerchild-transparent":"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+s+'<div class="layui-m-layercont">'+n.content+"</div>"+d+"</div></div></div>",!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;o<r;o++)s.touch(l[o],a);if(e.shade&&e.shadeClose){var d=t[i]("layui-m-layershade")[0];s.touch(d,function(){layer.close(n.index,e.end)})}e.end&&(s.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new d(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(s.timer[e]),delete s.timer[e],"function"==typeof s.end[e]&&s.end[e](),delete s.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window);
|
||||
;!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?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),d=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();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='<i class="layui-m-layerload-default"></i><i class="layui-m-layerload-default layui-m-layerload"></i><i class="layui-m-layerload-default"></i><p>'+(n.content||"")+"</p>";else{var y="";1!==n.loadingType&&4!==n.loadingType||(y="layui-m-layerload-type1",n.anim=!1),(2===n.loadingType||5===n.loadingType)&&(y="layui-m-layerload-type2"),(3===n.loadingType||6===n.loadingType)&&(y="layui-m-layerload-type3"),n.content='<i class="'+y+'"></i><p>'+(n.content||"")+"</p>"}if(n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),l.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade '+(n.loadingType>3?"layui-m-layershade-transparent":"")+'"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+" "+(n.loadingType>3?"layui-m-layerchild-transparent":"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+s+'<div class="layui-m-layercont">'+n.content+"</div>"+d+"</div></div></div>",!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;o<r;o++)s.touch(l[o],a);if(e.shade&&e.shadeClose){var d=t[i]("layui-m-layershade")[0];s.touch(d,function(){layer.close(n.index,e.end)})}e.end&&(s.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new d(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(s.timer[e]),delete s.timer[e],"function"==typeof s.end[e]&&s.end[e](),delete s.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window);
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>手机版测试</title>
|
||||
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
|
||||
<script src="dist/mobile/layer.js?_v=0.0.01"></script>
|
||||
<script src="dist/mobile/layer.js?_v=0.0.02"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'seanfont', "microsoft yahei";
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
layer.open({type: 2, content: '数据加载中...'});
|
||||
});
|
||||
$("#loading1").on("click", function(){
|
||||
layer.open({type: 2, loadingType: 1, content: '数据加载中...', anim: false});
|
||||
layer.open({type: 2, loadingType: 1, content: '数据加载中...'});
|
||||
});
|
||||
$("#loading2").on("click", function(){
|
||||
layer.open({type: 2, loadingType: 2, content: '数据获取成功'});
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
layer.open({type: 2, loadingType: 3, content: '数据获取失败'});
|
||||
});
|
||||
$("#loading4").on("click", function(){
|
||||
layer.open({type: 2, loadingType: 4, content: '数据加载中...', anim: false});
|
||||
layer.open({type: 2, loadingType: 4, content: '数据加载中...'});
|
||||
});
|
||||
$("#loading5").on("click", function(){
|
||||
layer.open({type: 2, loadingType: 5, content: '数据获取成功'});
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ Layer.prototype.view = function(){
|
|||
config.content = '<i class="layui-m-layerload-default"></i><i class="layui-m-layerload-default layui-m-layerload"></i><i class="layui-m-layerload-default"></i><p>'+ (config.content||'') +'</p>';
|
||||
}else{
|
||||
var loadingClass = '';
|
||||
(config.loadingType === 1 || config.loadingType === 4) && (loadingClass = 'layui-m-layerload-type1');
|
||||
if(config.loadingType === 1 || config.loadingType === 4){loadingClass = 'layui-m-layerload-type1';config.anim = false;}
|
||||
(config.loadingType === 2 || config.loadingType === 5) && (loadingClass = 'layui-m-layerload-type2');
|
||||
(config.loadingType === 3 || config.loadingType === 6) && (loadingClass = 'layui-m-layerload-type3');
|
||||
config.content = '<i class="' + loadingClass + '"></i><p>'+ (config.content||'') +'</p>';
|
||||
|
|
|
|||
Loading…
Reference in New Issue