• mui 等待动画loading mui.showLoading


     显示加载框:
    mui.showLoading("正在加载..","div"); //加载文字和类型,plus环境中类型为div时强制以div方式显示
    隐藏加载框:
    mui.hideLoading(callback);//隐藏后的回调函数

    注意:
    加载框只会显示一个,多次调用showLoading只会显示最后一次调用的内容。

    //扩展mui.showLoading
    (function($, window) {
        //显示加载框
        $.showLoading = function(message,type) {
            if ($.os.plus && type !== 'div') {
                $.plusReady(function() {
                    plus.nativeUI.showWaiting(message);
                });
            } else {
                var html = '';
                html += '<i class="mui-spinner mui-spinner-white"></i>';
                html += '<p class="text">' + (message || "数据加载中") + '</p>';
    
                //遮罩层
                var mask=document.getElementsByClassName("mui-show-loading-mask");
                if(mask.length==0){
                    mask = document.createElement('div');
                    mask.classList.add("mui-show-loading-mask");
                    document.body.appendChild(mask);
                    mask.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});
                }else{
                    mask[0].classList.remove("mui-show-loading-mask-hidden");
                }
                //加载框
                var toast=document.getElementsByClassName("mui-show-loading");
                if(toast.length==0){
                    toast = document.createElement('div');
                    toast.classList.add("mui-show-loading");
                    toast.classList.add('loading-visible');
                    document.body.appendChild(toast);
                    toast.innerHTML = html;
                    toast.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});
                }else{
                    toast[0].innerHTML = html;
                    toast[0].classList.add("loading-visible");
                }
            }   
        };
    
        //隐藏加载框
          $.hideLoading = function(callback) {
            if ($.os.plus) {
                $.plusReady(function() {
                    plus.nativeUI.closeWaiting();
                });
            } 
            var mask=document.getElementsByClassName("mui-show-loading-mask");
            var toast=document.getElementsByClassName("mui-show-loading");
            if(mask.length>0){
                mask[0].classList.add("mui-show-loading-mask-hidden");
            }
            if(toast.length>0){
                toast[0].classList.remove("loading-visible");
                callback && callback();
            }
          }
    })(mui, window);
    /*----------------mui.showLoading---------------*/
    .mui-show-loading {
        position: fixed;
        padding: 5px;
        width: 120px;
        min-height: 120px;
        top: 45%;
        left: 50%;
        margin-left: -60px;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        border-radius: 5px;
        color: #FFFFFF;
        visibility: hidden;
        margin: 0;
        z-index: 2000;
    
        -webkit-transition-duration: .2s;
        transition-duration: .2s;
        opacity: 0;
        -webkit-transform: scale(0.9) translate(-50%, -50%);
        transform: scale(0.9) translate(-50%, -50%);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    .mui-show-loading.loading-visible {
        opacity: 1;
        visibility: visible;
        -webkit-transform: scale(1) translate(-50%, -50%);
        transform: scale(1) translate(-50%, -50%);
    }
    .mui-show-loading .mui-spinner{
        margin-top: 24px;
        width: 36px;
        height: 36px;
    }
    .mui-show-loading .text {
        line-height: 1.6;
        font-family: -apple-system-font,"Helvetica Neue",sans-serif;
        font-size: 14px;
        margin: 10px 0 0;
        color: #fff;
    }
    
    .mui-show-loading-mask {
      position: fixed;
      z-index: 1000;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
    }
    .mui-show-loading-mask-hidden{
        display: none !important;
    }
    mui.showLoading("正在加载..","div"); //加载文字和类型,plus环境中类型为div时强制以div方式显示
    mui.hideLoading(callback);//隐藏后的回调函数


  • 相关阅读:
    第4課 部屋に机といずがあらます。
    (转)三层结构设计与ERP部署规划
    多线程的一个问题(同步事件和等待句柄)转
    C#操作xml小结(转)
    再论Assembly Registration Tool (Regasm.exe)
    再论Type Library Importer (Tlbimp.exe)
    Blittable and NonBlittable Types
    再论Importing a Type Library as an Assembly
    .Net Remoting(基本操作) Part.2 (转)
    Monitor类示例(转)
  • 原文地址:https://www.cnblogs.com/li-sir/p/12076914.html
Copyright © 2020-2023  润新知