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

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

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

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. LeetCode dp专题

    1. 动态规划的适用场景 动态规划常常适用于有重叠子问题和最优子结构性质的问题,动态规划方法所耗时间往往远少于朴素解法. 2. 动态规划的基本思想 动态规划背后的基本思想非常简单.大致上,若要解一个给 ...

  2. 8. Scala面向对象编程(高级部分)

    8.1 静态属性和静态方法 8.1.1 静态属性-提出问题 有一群小孩在玩堆雪人,不时有新的小孩加入,请问如何知道现在共有多少人在玩?请使用面向对象的思想,编写程序解决 8.1.2 基本介绍 -Sca ...

  3. NETCore使用带有权限验证的Swagger

    原文:NETCore使用带有权限验证的Swagger 文章目录 Swagger 什么是Swagger NuGet安装 Startup注册Swagger 设置默认首页打开Swagger 为接口添加注释 ...

  4. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  5. js高频经典面试题总结

    类型转换问题 console.log(null>=0); console.log(null<=0); console.log(null==0); console.log(undefined ...

  6. 11、多行文本最后一行显示省略号并截取文本字数(vue)

    1.首先通过css实现多行文本显示省略号: { height: 45px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-li ...

  7. OpenSessionInViewFilter 的配置及替代方案

    OpenSessionInViewFilter 的配置及替代方案 博客分类: hibernate OpenSessionInViewFilter 的配置及替代方案  Spring 为我们提供了一个叫做 ...

  8. mac php thinkphp5 验证码报错 Call to undefined function think\captcha\imagettftext()

    百度一下,是GD库里缺少了freetype支持,然后各种拓展的方法都试了半天,php-v里都生效了,phpinfo里还是不生效,原来是各种文章里都缺少了最关键的一步,修改Apache的配置(我使用的是 ...

  9. Linux开发环境配置大全

    Linux开发环境配置 零章:通过xshell在linux上安装JDK8 壹章:通过xshell在linux上安装tomcat8 贰章:通过xshell在linux上安装mysql5.7(终极版) 叁 ...

  10. zabbix--CPU监控并告警

    zabbix监控CPU超值则报警 由于默认没有 cpu 的使用率监控,需要添加一个监控项,通过 system.cpu.util[,,] 来进行配置 添加监控项  添加图形 添加触发器 展示图