mui扩展插件mui.showLoading加载框

写在前面:
好像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     width: 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     width: 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 }

预览效果: 

 

posted @ 2018-05-30 09:50  王的孤傲  阅读(9113)  评论(0编辑  收藏  举报