CSS

Question

我了解如何在页面制作和ajax调用时使用javascript将光标更改为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);
    }
}

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

Answer 3

只需给每个按钮一个类，说“WaitOnClick”，然后写下来：$(".WaitOnClick").click(function() {

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

3 个答案:

CSS

的JavaScript