在页面加载时将光标更改为忙碌

Question

我理解如何使用javascript在页面制作和ajax调用时将光标更改为busy.

但是我有一个不使用ajax的页面,它使用回发来重新加载页面.然而,负载相当数据密集,需要几秒钟.在此期间,用户仍然可以单击该页面.我想将光标变为"等待",因此用户不会尝试单击该页面.

例如,我有几个导致回发的下拉列表.我做了一个选择,页面加载3秒钟.当它加载时我希望光标转向等待,这样用户就不会尝试在第二个下拉列表中进行选择,直到页面重新加载.

这可能吗？

附加信息:(我的设置的简化版)

我有一个主页:

<form id="form1" runat="server">
<table width = "100%" bgcolor="White">
<tr><td>
<h3><asp:ContentPlaceHolder id="MAIN" runat="server"></asp:ContentPlaceHolder></h3>
</tr></td>
</table>
</form>
<script type="text/javascript">
    function cursorwait(e) {
        document.body.style.cursor = 'wait';
    }

    var fm = document.getElementById('<% =form1.ClientID %>');
    if (fm.addEventListener) {
        fm.addEventListener('submit', cursorwait, false);
    }
    else {
        fm.attachEvent('onsubmit', cursorwait);
    }
</script>

然后是使用母版页的页面:

<asp:Content ID="Content1" ContentPlaceHolderID="MAIN" Runat="Server">
<table runat=server id="tb_simple_search_table" cellpadding = 0 cellspacing = 0>
<tr><td>
    <asp:DropDownList...
    <asp:DropDownList...
</td></tr>
</table>
</asp:content>

Answer 1

我不确定这是否是最好或最有效的方法,但如果你想更改光标以显示页面在按钮后忙,请点击以下jQuery应该可以做到这一点:

$(document).ready(function() {
    $(".button").click(function() {
        $("*").css("cursor", "wait");
    });
});

Answer 2

您可以为表单的submit事件添加处理程序.

CSS

    .wait, .wait * { cursor: wait; }

JavaScript的

function cursorwait(e) {
    document.body.className = 'wait';
}

var fm = document.getElementById('<% =form1.ClientID %>');
var proxySubmit = fm.onsubmit;

fm.onsubmit = function () {
    cursorwait();
    if (proxySubmit) {
        proxySubmit.call(fm);
    }
}

在这里我们确保我们的方法被调用,如果submit()在js中调用,就像它在导致回发时下拉一样.这也应该捕获表单提交的任何其他实例.