利用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.     };  
  56. })(jQuery); 

 

 

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

[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); 

 

在编写一个JS类，编写三个方法，供页面调用：

[javascript] view plaincopy
    1. /************************************* layer.class Javascript Library  *************************** 
    2. * Using jQuery 1.7.1 
    3. * Version : 1.0.0 
    4. * Name : layer.class.js 
    5. * Create by Angle.Yang on 2012/03/07 
    6. *******************************************************************************************/  
    7.   
    8. $.extend({  
    9.     layer: {  
    10.         name: "layer.class.js",  
    11.         globalVar: {}, // 内部变量， 外部不得使用(document.body 未初始化时使用；内部变量)  
    12.           
    13.         setMaskTitle: function (title) {  
    14.             /// <summary>  
    15.             /// 修改遮罩层的内容 Angle.Yang 2012.03.07 16:35 Add  
    16.             /// </summary>  
    17.             /// <param name="title" type="string">遮罩层中的提示信息</param>  
    18.             /// <returns type="void" />  
    19.             $.fn.masklayer({ title: title, action: "setTitle" });  
    20.         },  
    21.   
    22.         openMask: function (title) {  
    23.             /// <summary>  
    24.             /// 显示遮罩层DIV Angle.Yang 2012.03.07 16:35 Add  
    25.             /// </summary>  
    26.             /// <param name="title" type="string">遮罩层中的提示信息</param>  
    27.             /// <returns type="void" />  
    28.             $.fn.masklayer({ title: title, action: "open" });  
    29.         },  
    30.   
    31.         closeMask: function () {  
    32.             /// <summary>  
    33.             /// 关闭遮罩层DIV Angle.Yang 2012.03.07 16:35 Add  
    34.             /// </summary>  
    35.             /// <returns type="void" />  
    36.             $.fn.masklayer({ action: "close" });  
    37.         }  
    38.   
    39.     }  
    40. });  
    41.   
    42. cks.using("kits/ck.layer.js");  

    46. 编写我们的页面，引用JQuery(1.7.1)版本，引用layer.class.js；页面加入代码以及自己调用大概如下：

      [javascript] view plaincopy
      1.     <script src="../js/jquery.js" type="text/javascript"></script>  
      2.     <script src="../js/layer.class.js" type="text/javascript"></script>  
      3.     <script type="text/javascript" language="javascript">  
      4.         function GetDataSource() {  
      5.            layer.openMask("数据提交中，请稍等..."); //开始给出提示     
      6.            $.ajax({  
      7.                url: s.url + "&FormControlID=" + obj.id,  
      8.                async: true,  
      9.                cache: false,  
      10.                contentType: "text/xml; charset=\"utf-8\"",  
      11.                data: {},  
      12.                dataType: "xml",  
      13.                type: "Post",  
      14.                success: function (xml, textStatus, jqXHR) {  
      15.                    layer.setMaskTitle("数据返回加载中..."); //中间修改提示文本     
      16.                    //执行相关代码     
      17.                },  
      18.                complete: function (jqXHR, textStatus) {  
      19.                    layer.closeMask(); //执行完关闭     
      20.                }  
      21.            });  
      22.        }  
      23.       </script> 

posted on 2015-08-03 17:08  静以修身！  阅读(9668)  评论(1)  编辑  收藏  举报

导航