利用JS弹出层实现简单的动态提示“正在加载中,请稍等...


 最近项目中大量用到了JQuery中的Ajax异步加载数据,数据量非常大,导致每次加载的时候都感觉到非常非常慢,让客户体验非常不好,就想到用JS做一个简单的提示。

JQuery版本:1.7.1;

编写一个JS类(ck.layer.js):

[javascript] view plaincopy
  1. /************************************* Achievo.Javascript Library ************************** 
  2. * Using jQuery 1.7.1 
  3. * Using cks.js 1.0.1 
  4. * Name : ck.layer.js 
  5. * Create by Angle.Yang on 2012/03/07 [V1.0.0] 
  6. *******************************************************************************************/  
  7. (function ($) {  
  8.   
  9.     $.fn.masklayer = function (settings) {  
  10.         /// <summary>  
  11.         /// 模态窗口,继承 easy-ui.window  
  12.         /// </summary>  
  13.         /// <param name="settings" type="object">扩展了{title:[div中的内容], action:[执行的动作,目前支持"close"], result:[返回结果]}</param>  
  14.         /// <returns type="void" />  
  15.   
  16.         settings = $.extend(true, { title: '加载中...', action: "open" }, settings);  
  17.   
  18.   
  19.         /// <summary>  
  20.         /// 初始化所有 cks 样式的按钮(页面运行时进行初始化)  
  21.         /// </summary>  
  22.         /// <returns type="void" />  
  23.   
  24.         _init = function () {  
  25.             if (settings.action == "open") {  
  26.                 if ($("#div_load").length == 0) {  
  27.                     var boardDiv = "<div id='div_load'><\/div>";  
  28.                     $(document.body).append(boardDiv);  
  29.                 }  
  30.                 if ($("#div_load").length > 0) {  
  31.                     $("#div_load").fix_ie6Select();  
  32.                     $("#div_load").css("display""block");  
  33.                     $("#div_load").css("height", document.body.offsetHeight);  
  34.                     $("#div_load").html(settings.title);  
  35.                 }  
  36.             }  
  37.             else if (settings.action == "close") {  
  38.                 if ($("#div_load").length > 0) $("#div_load").css("display""none");  
  39.             }  
  40.             else if (settings.action = "setTitle") {  
  41.                 if ($("#div_load").length > 0) $("#div_load").html(settings.title);  
  42.                 else {  
  43.                     var boardDiv = "<div id='div_load'>" + settings.title + "<\/div>";  
  44.                     $(document.body).append(boardDiv);  
  45.                     $("#div_load").fix_ie6Select();  
  46.                     $("#div_load").css("display""block");  
  47.                     $("#div_load").css("height", document.body.offsetHeight);  
  48.                 }  
  49.             }  
  50.         };  
  51.   
  52.   
  53.         return (function () { _init() })();  
  54.   
  55.     };  




$("#div_load").fix_ie6Select(); 这句调用另一个JS,主要作用是兼容IE6遮罩一些控件(这个是我老大写的):

  1. [javascript] view plaincopy
    1. /************************************* Achievo.Javascript Library ************************** 
    2. * Using jQuery 1.7.1 
    3. * Using cks.js 1.0.2 
    4. * Name : ck.fixer.js 
    5. * Create by Toky on 2012/02/14 [V1.0.0] 
    6. *******************************************************************************************/  
    7.   
    8. (function ($) {  
    9.     $.fn.fix_ie6Select = function () {  
    10.         /// <summary>  
    11.         /// 兼容弹出层在 IE6 下不能掩盖 Select  
    12.         /// </summary>  
    13.         /// <returns type="void" />  
    14.         return this.each(function (index) {  
    15.             var frm = $(this).find('iframe[tag*="ie6Selector"]');  
    16.             if (cks.browser.IE6) {  
    17.                 var w = $(this).width();  
    18.                 var h = $(this).height();  
    19.                 if (frm.length == 0) {  
    20.                     $(this).prepend('<iframe tag="ie6Selector" src="" frameborder="no" marginwidth="0" marginheight="0" style="border:none;position:absolute;visibility:inherit;top:0px;left:0px;width:' + w + 'px;height:' + h + 'px;z-index:-1;"></iframe>');  
    21.                 }  
    22.                 else {  
    23.                     frm.css("width", w);  
    24.                     frm.css("height", h);  
    25.                 }  
    26.             }  
    27.         });  
    28.     };  
    29. })(jQuery);  

  2. })(jQuery);  
阅读更多

没有更多推荐了,返回首页