• 利用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;' + 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");  
      43. 编写我们的页面,引用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> 
  • 相关阅读:
    暴力STL
    多维坐标离散 排序二分 | set | hash
    H. 试题H:摆动序列 25'
    蓝桥杯模拟赛4.D.路径配对[搜索+判重]
    python 参数表,可变参数,用 json/dict 作为函数参数传入
    sql 修改查询结果的值给接下来的查询用,但是不更改数据库中的值
    使用chrome全网页或部分网页截图
    一个sql语句中用多个where
    sql 使用with as 语句报 “Only `SELECT` statements are allowed against this database”错误
    go 语言并行
  • 原文地址:https://www.cnblogs.com/lengzhijun/p/4699827.html
Copyright © 2020-2023  润新知