MUI中等待框的H5实现
MUI没有内置的那个弹出转圈圈的那个等待框，那个nativeui.showwaiting是只能用于app中的，不能用在H5网页中的，网上找了下，找到个别人已经写好的，自己 测试了下没问题，先记下来
@{
Layout = null;
Niunan.GRWX.Model.Product product = ViewBag.product;
Niunan.GRWX.Model.Userinfo user = ViewBag.user;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兑换礼品</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="/content/css/mui.min.css" rel="stylesheet" />
<link href="/content/css/theone.css" rel="stylesheet" />
<style>
html,
body {
background-color: #efeff4;
}
.title {
padding: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
background-color: #fff;
}
</style>
<style>
/*----------------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;
}
</style>
</head>
<body>
<div class="mui-content user-password user-addcard">
<form class="mui-input-group" style="margin-top: 0;">
<div class="mui-input-row">
<label>礼品名称</label>
<span style="line-height:38px;">@product.proname</span>
</div>
<div class="mui-input-row">
<label>用户名</label>
<span style="line-height:38px;">@user.username</span>
</div>
<div class="mui-input-row">
<label>手机</label>
<input type="text" class="mui-input-clear" id="mobile" name="mobile" value="@user.mobile" />
</div>
<div class="mui-input-row">
<label>收货地址</label>
<input type="text" class="mui-input-clear" id="address" name="address" value="@user.address" />
</div>
<div class="enterbtn-wr">
<button type="button" class="mui-btn mui-btn-danger enterbtn" id="btn1">兑换礼品</button>
@Html.AntiForgeryToken()
<input type="hidden" id="proid" value="@product.id" />
<input type="hidden" id="userid" value="@user.id" />
</div>
</form>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/mui.min.js"></script>
<script>
//扩展mui.showLoading http://ask.dcloud.net.cn/article/12856?item_id=12464
(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);
</script>
<script>
document.getElementById('btn1').addEventListener('tap', function () {
var userid = document.getElementById('userid').value;
var proid = document.getElementById('proid').value;
var mobile = document.getElementById('mobile').value;
var zipcode = '';
var address = document.getElementById('address').value;
var __RequestVerificationToken = document.getElementsByName('__RequestVerificationToken')[0].value;
var postdata = { userid: userid, proid: proid, mobile: mobile, zipcode: zipcode, address: address, __RequestVerificationToken: __RequestVerificationToken };
console.log(postdata);
var url = "/order/add";
mui.showLoading("正在提交..", "div");
mui.post(url, postdata, function (data) {
mui.hideLoading(function () { });//隐藏后的回调函数
if (data.code == 0) {
mui.alert(data.msg, function () { location.href = "/userinfo/index" });
} else {
mui.alert(data.msg);
}
}, 'json')
})
</script>
</body>
</html>
MUI中等待框的H5实现的更多相关文章
- Mui中mui.openWindow()方法具体参数信息（内容来自Mui问题专区）
mui.openWindow({ url: 'xxx.html', //String类型,要打开的界面的地址 id: 'id', //String类型,要打开的界面的id styles: { //We ...
- IOS开发UI篇之──自定义加载等待框（MBProgressHUD）
本文转载至 http://blog.csdn.net/xunyn/article/details/8064984 原文地址http://www.189works.com/article-89289 ...
- （转载）Android自定义ProgressDialog进度等待框
Android自定义ProgressDialog进度等待框 作者:无缘公子 字体:[增加 减小] 类型:转载 时间:2016-01-11我要评论 这篇文章主要介绍了Android自定义Progress ...
- Hybrid App中原生页面 VS H5页面
Hybrid App中原生页面 VS H5页面 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Nativ ...
- mui中的关闭页面的几种方法
一.总结: mui中关闭当前页面的几种方式: 1.swipeBack(暂未测试过) 2.keyEventBind(暂未测试过) 3.给标签的class加.mui-action-back(返回的是前一个 ...
- IOS 加载中提示框
LoadingView.h #import <Foundation/Foundation.h> @class MBProgressHUD; @interface LoadingView : ...
- MVC 如何在一个同步方法（非async）方法中等待async方法
MVC 如何在一个同步方法(非async)方法中等待async方法 问题 首先,在ASP.NET MVC 环境下对async返回的Task执行Wait()会导致线程死锁.例: public Actio ...
- 关于mui 中popover与下拉刷新冲突问题
最近用mui做app混合式开发时,作为一个后端开发,高前端确实有点吃了,期间遇到的问题肯定也不少.这两天app做更新,为了装逼,将更新的提示搞得好看些,用到了mui中的popover,结果把自己整死了 ...
- boostrap中模态框显示在阴影之下
boostrap中模态框显示在阴影之下 出现这种情况的原因我开始也搞了很久,问题出现在哪里呢? 有事问百度,在百度上查了一下资料,他们主要的解决办法:是 修改标签的z-index属性的值, 我试着改了 ...
随机推荐
- BZOJ1103 [POI2007]大都市meg dfs序 线段树
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1103 题意概括 一棵树上,一开始所有的边权值为1,我们要支持两种操作: 1. 修改某一条边的权值为 ...
- python中执行shell的两种方法总结
这篇文章主要介绍了python中执行shell的两种方法,有两种方法可以在Python中执行SHELL程序,方法一是使用Python的commands包,方法二则是使用subprocess包,这两个包 ...
- LoRaWAN 1.1 网络协议规范 - 1 引言
LoRaWAN 1.1 网络协议规范 LoRaWAN 1.1 版本封稿很久了也没有完整啃过一遍,最近边啃边翻译,趁着这个机会把它码下来. 如果觉得哪里有问题,欢迎留言斧正. 翻译不易,转载请申明出处和 ...
- 大数据系列博客之 --- 深入简出 Shell 脚本语言（高级篇）
首先声明,此系列shell系列博客分为四篇发布,分别是: 基础篇:https://www.cnblogs.com/lsy131479/p/9914747.html 提升篇:https://www.cn ...
- websphere 进程
websphere 监听的是8880端口, 一个server占用300M的内存. 1.查看进程号 >netstat -aon | findstr "8880" TCP 0.0 ...
- 网页图表Highcharts实践教程之外层图表区
网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细 ...
- 探究functools模块wraps装饰器的用途
<A Byte of Python>17.8节讲decorator的时候,用到了functools模块中的一个装饰器:wraps.因为之前没有接触过这个装饰器,所以特地研究了一下. 何谓“ ...
- [ZJOI2010]网络扩容
OJ题号: BZOJ1834.洛谷2604 思路: 对于第一问,直接跑一遍最大流即可. 对于第二问,将每条边分成两种情况,即将每条边拆成两个: 不需扩容,即残量大于零时,相当于这条边费用为$0$: 需 ...
- cocos2d-x入门学习--准备篇
1.Cocos2D最早是一款用Python语言开发的游戏引擎.Cocos2D是一个开源框架,用于构建二维游戏,演示程序和其他图形界面交互应用等. 2.x的包含两个意思:一方面是C++的文件扩展为CXX ...
- java引用类型简述
主要内容: 1.引用类型简述 2.对象的可达性 3.软引用的垃圾回收分析 4.WeakHashMap分析 5.ThreadLocal内存泄漏分析 1.引用类型简述 在Java语言中除了基本数据类型外, ...