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

发布于 2024-09-29 14:26:57 字数 1302 浏览 8 评论 0原文

我了解如何在页面进行和 ajax 调用时使用 javascript 将光标更改为忙。

但是我有一个不使用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>

原文

I understand how to use javascript to change the cursor to busy while the page is making and ajax call.

However I have a page that does not use ajax, it uses a postback to reload the page. However the load is rather data intensive and it takes a few seconds. During this time the user can still click on the page. I want to turn the cursor to "waiting" so the user does not try to click on the page.

For example I have a couple of dropdowns that cause postback. I make a selection and the page loads for 3 seconds. While it loads I would like the cursor to turn to waiting so the user does not try to make a selection on a second dropdown until the page reloads.

Is this possible?

Additional Info: (simplified version of my setup)

I have a masterpage:

<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>

and then a page that uses the master page:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

标点 2024-10-06 14:26:57

我不确定这是否是最好或最有效的方法，但如果您想在单击按钮后更改光标以显示页面正忙，则以下 jQuery 应该可以解决问题：

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

I am not certain if this is the best or most efficient method but if you want to change the cursor to show the page is busy after the button click the following jQuery should do the trick:

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

回复收藏 0 原文

在梵高的星空下 2024-10-06 14:26:57

您可以向表单的 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() ，我们的方法就会被调用，就像下拉菜单在导致回发时所做的那样。这也应该捕获表单提交的任何其他实例。

you can add a handler to the form's submit event.

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);
    }
}

here we're ensuring our method gets called if submit() is called in js like the drop down does when it causes a postback. this should also catch any other instances of the form submitting.

回复收藏 0 原文