zoukankan      html  css  js  c++  java
  • 添加一个提示操作正在执行请等待的浮动层的几种方法

     1.用的是MS的UPDATEPANLE做AJAX时可以采用下面的

    Sys.WebForms.PageRequestManager 类

    管理服务器 UpdatePanel 控件在浏览器中的部分页更新,并通过使用客户端脚本定义属性、事件和方法以自定义 Web 页。

    <div id="BusyDialog" class="BusyDialogDiv">
            <asp:Image runat="server" ID="BusyImage" ImageUrl="http://images.cnblogs.com/Indicator.gif" />
        </div>
        <script type="text/javascript">
            function showDialogue() {
                DivDialog.ShowModalDialog('BusyDialog');
            }
            DivDialog.CloseDialog('BusyDialog');
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
            Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(beginLoading);
            function beginRequest(sender, args) {
                DivDialog.ShowModalDialog('BusyDialog');
            }

            function beginLoading(sender, args) {
                DivDialog.CloseDialog('BusyDialog');
            }
        </script>

    这部分代码对所有UPDATE里的有刷新动作的都有用

    2.JQUERY 处理

    jquery中ajaxSend的问题

    $('#div').ajaxSend(...);如果一个页面只有一个这种JS不会有问题,但现在情况 是一个页面需要多个,如:$('#div').ajaxSend(...);$('#div2').ajaxSend(...);$('#div3').ajaxSend(...);...
    这样在onClick某一个DIV的情况下,所有的容器都会响应ajaxSend(...)里的函数。如何只限制单击ID的容器响应相对的ajaxSend(...)?

    解决方案:

    根据这个方法的定义,当发送ajax请求的时候,jQuery会触发所有的ajaxSend事件。但是你可以通过传入的参数来控制当ajax请求发生时,让那个event执行。
    
    例如,根据ajax请求里的url参数来区分
    $('#div').ajaxSend(function(e, xhr, settings) {
          if (settings.url == '/ajax/test') {
                ...
          }
    });
    
    $('#div2').ajaxSend(function(e, xhr, settings) {
          if (settings.url == '/ajax/test2') {
                ...
          }
    });
    
    追问$('#div2').ajaxSend(function(e, xhr, settings) {
                $('#div2').html('...');           //这里也指定了容器,为什么不在这里面执行,而还是全部执行呢?
    }); 
    这和容器div,div2...是没关系的,官方文档写得很明白不管你设置了多少个ajaxsend callback在有ajax请求的时候都会一起触发。除非用传递的参数区分,在这里ajax请求发生的时候他不知道div,div2...
    只是单纯地执行所有预先设置的ajaxSend callback。
    
    你可以在firebug里看一下传入的e里面有没有你需要可以用来区分点击范围的变量

     举例:

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Index</title>
        <script src="http://www.cnblogs.com/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function cookieInfo() {
                var cookie = document.cookie;
                var name = "";
                if (cookie != "") {
                    var begin = cookie.indexOf('=') + 1;
                    name = cookie.substring(begin, cookie.length);
                }
                return name;
            }
            $(function() {
               
                if (cookieInfo() == "") {
                    $("#login").show();
                    $("#logInfo").hide();
                }
                else {
                    $("#login").hide();
                    $("#logInfo").show();
                }
                $("#login").ajaxSend(function() {
                    $(this).hide();
                    $("#showLog").show();
                    $("#showLog").html("请等待...");
                });

                $("#btnLogin").click(function() {
                    $.post("/User/Login", { name: $("#txtName").val(), pwd: $("#txtPwd").val() },
                       function(data) {
                           $("#login").show();
                           $("#showLog").hide();
                           if (data.indexOf("ok") != -1) {
                               //alert(document.cookie);
                               var name = cookieInfo();
                               $("#login").html("欢迎你:" + name + "<a href='/User/Logout'>注销</a>");
                           }
                           else {
                               if ($("#login").html().indexOf("用户名或密码错误") == -1)
                                   $("#login").prepend("用户名或密码错误<br>");

                           }

                       });
                });
            });
            function dologout() {
                $.get("/User/Logout", function(data) {
                    $("#login").show();
                    $("#logInfo").hide();
                    $("#showLog").hide();
                });
            }
        </script>
    </head>
    <body>
     <div id="login">  
        用户名:<input type="text" name="txtName" id="txtName" /><br />
        密码:<input type="password" name="txtPwd" id="txtPwd" /><br />
        <input type="button" value="登陆" id="btnLogin"/>   
    </div><div id="showLog"></div>   

    <div id="logInfo">欢迎你:<%=this.Request.Cookies["user"]==null?"":Request.Cookies["user"].Value%><a href='javascript:dologout()'>注销</a>
    </div>

    </body>
    </html>

  • 相关阅读:
    观光公交
    审查(银)
    小木棍 && 愤怒的小鸟
    SDOI2008 仪仗队 && SDOI2012 Longge的问题 && q
    斗地主 && Mayan游戏 && 作业调度方案
    过河
    跳跳棋
    count
    Cow Tennis Tournament
    luogu P1534不高兴的津津(升级版)
  • 原文地址:https://www.cnblogs.com/scottpei/p/2445361.html
Copyright © 2011-2022 走看看