运用aop思想来写前端加载提示信息

最新推荐文章于 2024-11-22 13:54:43 发布

最新推荐文章于 2024-11-22 13:54:43 发布 · 205 阅读

文章标签：

#aop #JavaScript #Ajax #ViewUI

js 专栏收录该内容

1 篇文章

订阅专栏

//
var showLoad = '<div id="bigloadGifShow" style="filter: Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3;position: absolute; left: 0; top: 0; display: back; overflow: hidden;background-color: #000;"></div>';
//
showLoad+='<div id="loadGifShow" style="text-align:center;display:back;position: absolute; left: 46%; top: 46%;"><img src="img/load.gif"/></div>';
//ajax请求开始
$(document).ajaxStart(function (){

$("body").append(showLoad);
showMask("bigloadGifShow");
});
//ajax请求结束
$(document).ajaxStop(function (){

$("#bigloadGifShow").remove();
$("#loadGifShow").remove();
});
//提交form表单
$(function(){

$("form").submit(function (){
$("body").append(showLoad);
showMask("bigloadGifShow");
});
});

//屏蔽输入，显示蒙板
function showMask(id) {
var obj = document.getElementById(id);
obj.style.width = document.body.clientWidth;
obj.style.height = document.body.clientHeight;
obj.style.display = "block";
}

这里将css样式都写在了style中，而没有单独提出，是因为可以使需要使用的页面少引入一个css文件。