完整代码如下:
var loadingDialog = null;
var loadingDialogisOpen = false;
function showLoading() {
if (loadingDialogisOpen) {
return true;
} else {
loadingDialogisOpen = true;
loadingDialog = mdui.dialog({
title: '请稍候',
content: '<div class="mdui-col-xs-12 mdui-center mdui-text-center"><div class="mdui-spinner mdui-spinner-colorful"></div></div>',
history: false,
modal: true,
closeOnEsc: false,
onOpened: function () {
mdui.updateSpinners();
},
buttons: [
{
text: '强制关闭',
bold: true,
close: false,
onClick: function () {
hideLoading();
}
}
]
});
}
return false;
}
function hideLoading() {
if (loadingDialog) {
if (loadingDialog.getState() === 'opened' || loadingDialog.getState() === 'opening') {
loadingDialog.close();
loadingDialogisOpen = false;
return true;
} else if (loadingDialog.getState() === 'closing' || loadingDialog.getState() === 'closed') {
loadingDialogisOpen = false;
return false;
}
}
return false;
}
作用是可以弹出一个等待界面,然后可以后台执行ajax操作等。主要可以自动加锁
使用方式:
if(showLoading())
{
mdui.alert("正在执行操作,请稍后再试")
return false;
}
$$.ajax({
method: 'POST',
url: '#',
success: function (data) {
var data = JSON.parse(data);
if (data.success) {
mdui.snackbar(data.message);
} else {
mdui.alert(data.message);
}
},
complete: function () {
hideLoading()
}
});
实际效果(传不上来):
逻辑:
showLoading()时,如果是true,代表等待界面已经打开,所以说明程序正在运行。
然后hideLoading()会关闭对话框,并且把标记复位,可以用到完成操作之后关闭对话框。
(反正很简单就是了