页面提交处理时候显示“正在处理，请稍后……”，防止二次提交功能。

最新推荐文章于 2024-08-02 07:53:33 发布

weixin_33841722

最新推荐文章于 2024-08-02 07:53:33 发布

阅读量2.1k

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/zhengjuzhuan/archive/2009/10/14/1583335.html

版权

1.Ajax实现

页面提交处理时候显示“正在处理，请稍后……”，防止二次提交功能。

在后台处理事件代码中添加： System.Threading.Thread.Sleep(1000);延迟处理可以显示效果

Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script type="text/javascript">
    function SendConfirm()
    {
        window.returnValue = true;
        window.close();
    }
    </script>
<style type="text/css">
    .progressBackground {
    background-color:menu;
    filter:alpha(opacity=50);}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                <div id="ad1" style="width: 100%; z-index: 20; margin: 0 auto; border: 0px; height: 100%;
                    position: absolute; top: 0; left: 0; border: 0; text-align: center;">
                    <table width="100%" height="100%" border="0">
                        <tr>
                            <td align="center">
                                <div>
                                    <div style="height: 27px; width: 300px; background: url(../Images/Titlebg.gif) repeat-x center;">
                                    </div>
                                    <table style="background-color: white; border: 1px solid #00ccff;" width="300" height="60">
                                        <tr>
                                            <td width="60" align="right">
                                                <img src="../Images/Loading.gif" /></td>
                                            <td>
                                                <p style=" text-align:left;">
                                                    正在处理，请稍后……</p>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <iframe id="frmBg" class="progressBackground" style="position: absolute; z-index: 0;
                    top: 0; left: 0; width: expression(document.body.scrollWidth); height: expression(document.body.scrollHeight);"
                    frameborder="0"></iframe>
                <div id="divBg" class="progressBackground" style="position: absolute; top: 0; left: 0;
                    z-index: 10; margin: 0 auto; border: 0; width: expression(document.body.scrollWidth);
                    height: expression(document.body.scrollHeight);" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

2.javascript实现

Code
Show("正在处理，请稍后……");
function $()
{
      var elements = new Array();
      for (var i = 0; i < arguments.length; i++)
      {
        var element = arguments[i];
        if (typeof element == 'string')
          element = document.getElementById(element);
        if (arguments.length == 1)
          return element;
        elements.push(element);
      }
      return elements;
}

function Show(message){
    HideElement();
    var eSrc=(document.all)?window.event.srcElement:arguments[1];
    var shield = document.createElement("DIV");//产生一个背景遮罩层
    shield.id = "shield";
    shield.style.position = "absolute";
    shield.style.left = "0px";
    shield.style.top = "0px";
    shield.style.width = "100%";
    shield.style.height = ((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+"px";
    shield.style.background = "menu";
    shield.style.textAlign = "center";
    shield.style.zIndex = "10000";
    shield.style.filter = "alpha(opacity=0)";
    shield.style.opacity = 0;

    var alertFram = document.createElement("DIV");//产生一个提示框
    strHtml="<div id=\"ad1\" style=\"width: 100%; z-index: 100; margin: 0 auto; border: 0px; height: 100%;position: absolute; top: 0; left: 0; border: 0; text-align: center;\"><table width=\"100%\" height=\"100%\" border=\"0\"><tr><td align=\"center\"><div><div style=\"height: 27px; width: 300px; background: url(Images/Titlebg.gif) repeat-x center;\"></div><table style=\"background-color: white; border: 1px solid #00ccff;\" width=\"300\" height=\"60\"><tr><td width=\"60\" align=\"right\"><img src=\"Images/Loading.gif\" /></td><td><p style=\" text-align:left;\">"+message+"</p></td></tr></table></div></td></tr></table></div><iframe id=\"frmBg\" class=\"progressBackground\" style=\"position: absolute; z-index: 0;top: 0; left: 0; width: expression(document.body.scrollWidth); height: expression(document.body.scrollHeight);\" frameborder=\"0\"></iframe><div id=\"divBg\" class=\"progressBackground\" style=\"position: absolute; top: 0; left: 0;z-index: 10; margin: 0 auto; border: 0; width: expression(document.body.scrollWidth);height: expression(document.body.scrollHeight);\" />";
    alertFram.innerHTML=strHtml;
    document.body.appendChild(alertFram);
    //document.body.appendChild(shield);

    this.setOpacity = function(obj,opacity){
        if(opacity>=1)opacity=opacity/100;
        try{ obj.style.opacity=opacity; }catch(e){}
        try{
            if(obj.filters.length>0&&obj.filters("alpha")){
            obj.filters("alpha").opacity=opacity*100;
            }else{
            obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";
            }
        }
        catch(e){}
    }

    var c = 0;
    this.doAlpha = function(){
    if (++c > 20){clearInterval(ad);return 0;}
    setOpacity(shield,c);
    }
    var ad = setInterval("doAlpha()",1);//渐变效果

    eSrc.blur();
    document.body.onselectstart = function(){return false;}
    document.body.oncontextmenu = function(){return false;}
}

   //隐藏页面上一些特殊的控件
function HideElement(){
    var HideElementTemp = new Array('IMG','SELECT','OBJECT','IFRAME');
    for(var j=0;j<HideElementTemp.length;j++){
        try{
                var strElementTagName=HideElementTemp[j];
                for(i=0;i<document.all.tags(strElementTagName).length; i++){
                    var objTemp = document.all.tags(strElementTagName)[i];
                    if(!objTemp||!objTemp.offsetParent)
                             continue;
                   objTemp.disabled="disabled"
                }
        }
        catch(e){}
    }
}

//添加取消处理
function Close(){
    var shield= $("shield");
    var alertFram= $("alertFram");
    if(shield!=null) {
        document.body.removeChild(shield);
    }
    if(alertFram!=null) {
        document.body.removeChild(alertFram);
    }
    document.body.onselectstart = function(){return true};
    document.body.oncontextmenu = function(){return true};
}

转载于:https://www.cnblogs.com/zhengjuzhuan/archive/2009/10/14/1583335.html