码迷,mamicode.com
首页 > 其他好文 > 详细

页面异步过程中的遮罩

时间:2014-10-09 14:32:33      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   ar   strong   数据   sp   

           原本是要继续发自定义控件形式的分页,但是我看了好一会觉得大概思路是利用委托实现事件调用重新绑定数据,我个人不太推荐这种,所以在此也就发了。

    采用AJAX异步方式请求在现在页面中非常普遍,原本延迟加载是异步加载的优势。但在不同情况下,如果用户已经发起一个异步请求,再去触发其他的请求可能会导致一些页面错误,假如能在第一次异步后加个页面遮罩就能很好的处理这个情况了。

    介绍的第一个遮罩是利用easyui的messager.progress,效果如下:

                    bubuko.com,布布扣 

   <link href="jquery-easyui-1.3.5/themes/default/easyui.css" rel="stylesheet" />
    <script src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
function func2() { $.messager.progress({ title: ‘请稍后‘, msg: ‘‘, text: ‘正在请求后台‘ }); setTimeout(function () { $.messager.progress(‘close‘);//关闭遮罩 alert(123); }, 4000); }

     第二种是利用jquery的mask()方法,给某个元素添加遮罩,效果如下:

                   bubuko.com,布布扣

     <script src="jquery-min-1.9.1.js"></script>
     <link href="jquery.loadmask.css" rel="stylesheet" />
     function Func () { $("body").mask("正在请求后台。。。"); setTimeout(function () { $("body").unmask();//取消遮罩 if (result == "ok") { alert(123); } },4000); }

     其中mask()这个方法需要注意我引用的是1.9.1的版本,  如果引用1.7.2是不会显示遮罩的(具体是那个版本开始支持的我不太清楚,需要查下)

    最后再介绍一个插件我用的比较多的blockUI,还是先看效果:

          bubuko.com,布布扣

       <script src="jquery-1.7.2.min.js"></script>
    <script src="jquery.blockUI.js"></script>
    function func3() { $.blockUI({ message: "<div style=‘float:left;margin-left:35%‘><img src=‘bg.gif‘ width=‘30px‘;height=‘30px‘ />
               </div><div style=‘line-height:30px;float:left;margin-left:10%‘>请稍候</div>", css: { border: ‘none‘, padding: ‘15px‘, backgroundColor: ‘Grey‘, width:"300px", opacity: .5, color: ‘Red‘ } }); setTimeout($.unblockUI, 2000); }

      其他还有很多,我列的是我以前整理的,仅供参考。

 

页面异步过程中的遮罩

标签:style   blog   color   io   os   ar   strong   数据   sp   

原文地址:http://www.cnblogs.com/sgfyfqh/p/4012777.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!