изменить курсор на занят, пока страница загружается - PullRequest
Новая
       6

изменить курсор на занят, пока страница загружается

8 голосов
/ 29 октября 2010

Я понимаю, как использовать javascript, чтобы изменить курсор на «занят» во время выполнения страницы и вызова ajax.

Однако у меня есть страница, которая не использует 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>

Ответы [ 3 ]

6 голосов
/ 29 октября 2010

Я не уверен, является ли это лучшим или наиболее эффективным методом, но если вы хотите изменить курсор, чтобы показать, что страница занята после нажатия кнопки, следующий jQuery должен сделать свое дело: 

$(document).ready(function() {
    $(".button").click(function() {
        $("*").css("cursor", "wait");
    });
});
5 голосов
/ 29 октября 2010

вы можете добавить обработчик к событию 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, как выпадающий список, когда он вызывает обратную передачу. это также должно отразить любые другие случаи отправки формы.

1 голос
/ 17 сентября 2014

Просто дайте каждой кнопке класс, скажите «WaitOnClick», а затем просто напишите: $(".WaitOnClick").click(function() {

...