显示加载框:
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. dp + 预处理前缀和 - HNU 13248 Equator

    Equator Problem's Link: http://acm.hnu.cn/online/?action=problem&type=show&id=13248&cour ...

  2. FPGA 开发板入手途径有哪些呢?

    买到一块 FPGA 开发板,你如何入手呢? 根据博主的经验,你可以通过如下途径来学习: 1.如果你是淘宝上买的,那么可以在淘宝上搜索你的开发板(一般 FPGA 开发板生厂商在淘宝上卖都会附带教程,如米 ...

  3. 使用预编译库PREBUILT LIBRARY官方说明

    使用预编译库 NDK 支持使用预编译库(同时支持静态库和共享库).此功能有以下两个主要用例: 向第三方 NDK 开发者分发您自己的库(而不分发您的源代码). 使用您自己的库的预编译版本来提升编译速度. ...

  4. javascript中五种迭代方法实例

    温习一下js中的迭代方法. <script type="text/javascript"> var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]; ...

  5. CKEditor 4 上传视频

    参考资料:CKEditor添加Video视频插件 HTML5 video 记得配置插件以及上传地址,不知道哪一个是上传视频的地址参数,我也没有试,因为我有上传图片的功能,所以这三个参数我都设置了. / ...

  6. python基础05--深浅copy, set,bytes

    1.1 深浅 copy 1. =  赋值操作, lis1=[1,2,3]  list2 = list1  list1.append(4)  则list1,list2都变 赋值都指向同一个地址,改变一个 ...

  7. Java自学-数字与字符串 MyStringBuffer

    自己开发一个Java StringBuffer 根据接口IStringBuffer ,自己做一个MyStringBuffer 步骤 1 : IStringBuffer接口 package charac ...

  8. python基础--数据结构之字典

    字典 特点:无序,键唯一 目录 1.字典的创建 2. .setdefault 的使用 3.  字典中的查找 4.字典中的改 5. 字典中的删除 6. 打印字典的方法 7. 格式化字符串 8. 合并字符 ...

  9. MongoDB常用数据库命令第一集

    1.查询操作(1)Help查看命令提示helpdb.help()db.test.help()db.test.find().help()(2)创建/切换数据库use music(3)查询数据库show ...

  10. angular创建一个独立弹窗服务

    1.说明: 这个服务用于创建一个modal(弹窗),通常下,这个弹窗会插入到body的底部,并且拥有自己的作用域($scope),也可以和外界通讯. 2.逻辑: (1).创建模版 (2).拿到模版里要 ...