写在前面：
好像mui目前dialog系列唯独缺少showLoading加载框(加载中)组件，为了统一组件样式和体验，写了这么一个扩展插件。
CSS和JS代码耦合性应该还是较低的，不妥之处欢迎指教！
优点：可以同时兼容Html5和plus，不必为不同环境单独分别Loading组件。
缺点：在页面嵌套情况下，遮罩仅对当前页面起作用。
使用方法：
显示加载框：
mui.showLoading("正在加载..","div"); //加载文字和类型，plus环境中类型为div时强制以div方式显示
隐藏加载框：
mui.hideLoading(callback);//隐藏后的回调函数
注意：
加载框只会显示一个，多次调用showLoading只会显示最后一次调用的内容。
Javascript代码：
1 //扩展mui.showLoading 2 (function($, window) { 3 //显示加载框 4 $.showLoading = function(message,type) { 5 if ($.os.plus && type !== 'div') { 6 $.plusReady(function() { 7 plus.nativeUI.showWaiting(message); 8 }); 9 } else { 10 var html = ''; 11 html += '<i class="mui-spinner mui-spinner-white"></i>'; 12 html += '<p class="text">' + (message || "数据加载中") + '</p>'; 13 14 //遮罩层 15 var mask=document.getElementsByClassName("mui-show-loading-mask"); 16 if(mask.length==0){ 17 mask = document.createElement('div'); 18 mask.classList.add("mui-show-loading-mask"); 19 document.body.appendChild(mask); 20 mask.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();}); 21 }else{ 22 mask[0].classList.remove("mui-show-loading-mask-hidden"); 23 } 24 //加载框 25 var toast=document.getElementsByClassName("mui-show-loading"); 26 if(toast.length==0){ 27 toast = document.createElement('div'); 28 toast.classList.add("mui-show-loading"); 29 toast.classList.add('loading-visible'); 30 document.body.appendChild(toast); 31 toast.innerHTML = html; 32 toast.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();}); 33 }else{ 34 toast[0].innerHTML = html; 35 toast[0].classList.add("loading-visible"); 36 } 37 } 38 }; 39 40 //隐藏加载框 41 $.hideLoading = function(callback) { 42 if ($.os.plus) { 43 $.plusReady(function() { 44 plus.nativeUI.closeWaiting(); 45 }); 46 } 47 var mask=document.getElementsByClassName("mui-show-loading-mask"); 48 var toast=document.getElementsByClassName("mui-show-loading"); 49 if(mask.length>0){ 50 mask[0].classList.add("mui-show-loading-mask-hidden"); 51 } 52 if(toast.length>0){ 53 toast[0].classList.remove("loading-visible"); 54 callback && callback(); 55 } 56 } 57 })(mui, window);
CSS代码
1 /*----------------mui.showLoading---------------*/ 2 .mui-show-loading { 3 position: fixed; 4 padding: 5px; 5 120px; 6 min-height: 120px; 7 top: 45%; 8 left: 50%; 9 margin-left: -60px; 10 background: rgba(0, 0, 0, 0.6); 11 text-align: center; 12 border-radius: 5px; 13 color: #FFFFFF; 14 visibility: hidden; 15 margin: 0; 16 z-index: 2000; 17 18 -webkit-transition-duration: .2s; 19 transition-duration: .2s; 20 opacity: 0; 21 -webkit-transform: scale(0.9) translate(-50%, -50%); 22 transform: scale(0.9) translate(-50%, -50%); 23 -webkit-transform-origin: 0 0; 24 transform-origin: 0 0; 25 } 26 .mui-show-loading.loading-visible { 27 opacity: 1; 28 visibility: visible; 29 -webkit-transform: scale(1) translate(-50%, -50%); 30 transform: scale(1) translate(-50%, -50%); 31 } 32 .mui-show-loading .mui-spinner{ 33 margin-top: 24px; 34 36px; 35 height: 36px; 36 } 37 .mui-show-loading .text { 38 line-height: 1.6; 39 font-family: -apple-system-font,"Helvetica Neue",sans-serif; 40 font-size: 14px; 41 margin: 10px 0 0; 42 color: #fff; 43 } 44 45 .mui-show-loading-mask { 46 position: fixed; 47 z-index: 1000; 48 top: 0; 49 right: 0; 50 left: 0; 51 bottom: 0; 52 } 53 .mui-show-loading-mask-hidden{ 54 display: none !important; 55 }
预览效果:
