<!-- JQ Block UI -->
<!-- 第一步,引入相关js文件,注意的是blockUI依赖于jQuery -->
<script type="text/javascript" src="../ui/jquery.blockUI.js"></script>
<script type="text/javascript" src="../jq/jquery.min.js"></script>
<!-- 第二步,让旋转的小图标隐藏起来(其实就是一个gif图片,哈哈)-->
<div style="display: none" id="loading"><img src="../img/loading.gif" alt="loading"/></div>
<!-- 在Ajax使用之前添加 -->
$(document).ajaxStart(function(){
$.blockUI({
message: $('#loading'),
css: {
top: ($(window).height() - 400) /2 + 'px',
left: ($(window).width() - 400) /2 + 'px',
width: '400px',
border: 'none'
},
overlayCSS: { backgroundColor: '#fff' }
});
}).ajaxStop($.unblockUI);
<!-- there is your Ajax request -->
官网:http://malsup.com/jquery/block/
其中例子很详细,可以参考学习。上面所写的若请求Ajax一直没有结束,用户都无法进行其他操作,有点不友好,可以设置超时时间,详细查看官网setTimeOut。
疑惑:当文档刚开始加载的时候,这个BlockUI是无法起作用,只能在浏览器渲染完毕后,为按钮添加事件什么的才起作用。还没弄明白,欢迎大侠指教。