显示加载框:
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:;
z-index:; -webkit-transition-duration: .2s;
transition-duration: .2s;
opacity:;
-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:;
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:;
top:;
right:;
left:;
bottom:;
}
.mui-show-loading-mask-hidden{
display: none !important;
}
mui.showLoading("正在加载..","div"); //加载文字和类型,plus环境中类型为div时强制以div方式显示
mui.hideLoading(callback);//隐藏后的回调函数
												

mui 等待动画loading mui.showLoading的更多相关文章

  1. [Swift通天遁地]一、超级工具-(11)使用EZLoadingActivity制作Loading加载等待动画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. android image加载中等待动画

    在布局中添加一个ImageViw和一个EditText. <ImageView android:id="@+id/loading_imageView_info" androi ...

  3. WPF 后台任务 等待动画 样例 && C# BackgroundWorker 详解

    运行效果: 前台代码: <Window x :Class="Waiting.Window1" xmlns="http://schemas.microsoft.com ...

  4. WPF加载等待动画

    原文:WPF加载等待动画 原文地址:https://www.codeproject.com/Articles/57984/WPF-Loading-Wait-Adorner 界面遮罩 <UserC ...

  5. salesforce 零基础学习(二十七)VF页面等待(loading)效果制作

    进行查询的情况下,显示友好的等待效果可以让用户更好的了解目前的状态以及减少用户消极的等待,例如下图所示. VF提供了<apex:actionStatus>标签,,此标签用于显示一个AJAX ...

  6. MUI框架-03-自定义MUI控件样式

    MUI框架-03-自定义MUI控件样式 开发请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 如何自定义MUI控件样式 mui 以 iOS 7的 UI 为基础,补充了 ...

  7. WPF 加载等待动画

    原文:WPF 加载等待动画 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_29844879/article/details/80216587 ...

  8. cocos2d-x游戏开发(十五)游戏加载动画loading界面

    个人原创,欢迎转载:http://blog.csdn.net/dawn_moon/article/details/11478885 这个资源加载的loading界面demo是在玩客网做逆转三国的时候随 ...

  9. Android 自定义动画 Loading

    转自:http://my.oschina.net/janson2013/blog/118558 1.定义一个ImageView 定义一个ImageView是为了装载图片,其中的图片将被rotate用来 ...

随机推荐

  1. Akka-CQRS(7)- CQRS Reader Actor 示范

    我们在这篇通过一个具体CQRS-Reader-Actor的例子来示范akka-persistence的query端编程和应用.在前面的博客里我们设计了一个CQRS模式POS机程序的操作动作录入过程,并 ...

  2. Replication:Distribution Reader

    在transactional replication中,在publication中执行了一个更新,例如:update table set col=? Where ?,如果table中含有大量的数据行, ...

  3. HTML+CSS综合练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 怎样调节Eclipse中的字体大小?

    window->perference->appearance->colors and font->text font edit

  5. 2019 中兴java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.中兴等公司offer,岗位是Java后端开发,因为发展原因最终选择去了中兴,入职一年时间了,也成为了面试官,之 ...

  6. vue项目使用html5+ barcode扫码在苹果遇到的问题以及自己的解决方法

      之前在记录扫码 在安卓时,会出现黑屏,错位,闪退等等问题.解决方法在另一篇文章里 https://www.cnblogs.com/huzhuhua/p/11064764.html . 当时以为 是 ...

  7. JavaScript 运算符(Operator)

    一.算数运算符 1.加法(+) 表示操作数相加:  处理特殊值规则: 如果两个操作数都是字符串,则将第二个操作数与第一个操作数拼接起来: 如果只有一个操作数是字符串,则将另一个操作数转换为字符串,然后 ...

  8. Android-----spinner组件使用(实现下单)

    list view组件和spinner组件使用方法类似,从string.xml中通过entries获取数据显示.但如果要显示的列表项无法在执行前确定,或是要在程序执行的过程中变更选项内容,通过entr ...

  9. kbmmw 网络研讨会视频回放(更新至11.9)

    kbmmw 近期举行了几次网络视频直播,为了方便大家观看,放在了优酷上面. 1.Firemonkey for Linux and RAD Server 和kbmmw smartbing for Tli ...

  10. 最常用MySql数据库备份恢复

    1.数据备份类型: ·完全备份:故名思议备份整个数据库 ·部分备份:备份一部分数据集 : ·增量备份:自上次备份以来的改变数据的备份: ·差异备份:自上次完全备份后改变数据的备份: 2.数据备份的方式 ...