Подождите, курсор на всю HTML-страницу - PullRequest
Новая
       27

Подождите, курсор на всю HTML-страницу

86 голосов
/ 11 октября 2008

Можно ли простым способом установить курсор на «ожидание» на всей html-странице? Идея состоит в том, чтобы показать пользователю, что что-то происходит во время завершения вызова ajax. Код ниже показывает упрощенную версию того, что я пробовал, а также демонстрирует проблемы, с которыми я сталкиваюсь:

  1. если элемент (# id1) имеет установленный стиль курсора, он будет игнорировать тот, который установлен в теле (очевидно)
  2. некоторые элементы имеют стиль курсора по умолчанию (а) и не будут отображать курсор ожидания при наведении курсора
  3. элемент body имеет определенную высоту в зависимости от содержимого, и если страница короткая, курсор не будет отображаться ниже нижнего колонтитула

Тест: 

<html>
    <head>
        <style type="text/css">
            #id1 {
                background-color: #06f;
                cursor: pointer;
            }

            #id2 {
                background-color: #f60;
            }
        </style>
    </head>
    <body>
        <div id="id1">cursor: pointer</div>
        <div id="id2">no cursor</div>
        <a href="#" onclick="document.body.style.cursor = 'wait'; return false">Do something</a>
    </body>
</html>

Позже редактировать ...
Он работал в Firefox и IE с: 

div#mask { display: none; cursor: wait; z-index: 9999; 
position: absolute; top: 0; left: 0; height: 100%; 
width: 100%; background-color: #fff; opacity: 0; filter: alpha(opacity = 0);}

<a href="#" onclick="document.getElementById('mask').style.display = 'block'; return false">
Do something</a>

Проблема с (или особенностью) этого решения заключается в том, что оно предотвратит щелчки из-за перекрывающегося div (спасибо Kibbee)

Позже, позже отредактируйте ...
Более простое решение от Dorward: 

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

, а затем 

<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>

Это решение показывает только курсор ожидания, но позволяет клики.

Ответы [ 12 ]

108 голосов
/ 29 мая 2012

Если вы используете эту слегка измененную версию CSS, которую вы разместили в Dorward, 

html.wait, html.wait * { cursor: wait !important; }

затем вы можете добавить несколько действительно простых jQuery для работы со всеми вызовами ajax: 

$(document).ready(function () {
    $(document).ajaxStart(function () { $("html").addClass("wait"); });
    $(document).ajaxStop(function () { $("html").removeClass("wait"); });
});

или, для более старых версий jQuery (до 1.9): 

$(document).ready(function () {
    $("html").ajaxStart(function () { $(this).addClass("wait"); });
    $("html").ajaxStop(function () { $(this).removeClass("wait"); });
});
32 голосов
/ 11 октября 2008

Я понимаю, что вы, возможно, не можете это контролировать, но вместо этого вы можете использовать "маскирующий" div, который покрывает все тело с z-индексом выше 1. Центральная часть div может содержать загрузочное сообщение, если тебе нравится.

Затем вы можете установить курсор на ожидание на div и не беспокоиться о ссылках, так как они находятся "под" вашим маскирующим div. Вот несколько примеров CSS для «маскирующего div»: 

body { height: 100%; }
div#mask { cursor: wait; z-index: 999; height: 100%; width: 100%; }
12 голосов
/ 11 октября 2008

Это похоже на работу в Firefox 

<style>
*{ cursor: inherit;}
body{ cursor: wait;}
</style>

Часть * гарантирует, что курсор не изменится при наведении курсора на ссылку Хотя ссылки по-прежнему будут кликабельными.

7 голосов
/ 30 июля 2012

Я боролся с этой проблемой сегодня часами. В основном все работало просто отлично в FireFox, но (конечно) не в IE. В IE курсор ожидания показывал ПОСЛЕ выполнения трудоемкой функции.

Я наконец нашел трюк на этом сайте: http://www.codingforums.com/archive/index.php/t-37185.html

Код: 

//...
document.body.style.cursor = 'wait';
setTimeout(this.SomeLongFunction, 1);

//setTimeout syntax when calling a function with parameters
//setTimeout(function() {MyClass.SomeLongFunction(someParam);}, 1);

//no () after function name this is a function ref not a function call
setTimeout(this.SetDefaultCursor, 1);
...

function SetDefaultCursor() {document.body.style.cursor = 'default';}

function SomeLongFunction(someParam) {...}

Мой код выполняется в классе JavaScript, следовательно, this и MyClass (MyClass - это одиночный код).

У меня возникли те же проблемы при попытке отобразить div, как описано на этой странице. В IE это показывалось после того, как функция была выполнена. Так что, думаю, этот трюк тоже решил бы эту проблему.

Спасибо огромное время автору поста. Вы действительно сделали мой день !!!

4 голосов
/ 19 октября 2012

css: .waiting * { cursor: 'wait' }

JQuery: $('body').toggleClass('waiting');

2 голосов
/ 25 июля 2012

Самый простой способ, которым я знаю, это использовать JQuery следующим образом: 

$('*').css('cursor','wait');
2 голосов
/ 11 октября 2008

Почему бы вам просто не использовать одну из этих причудливых графических загрузок (например: http://ajaxload.info/)? Курсор ожидания предназначен для самого браузера - поэтому, когда он появляется, он имеет отношение к браузеру, а не к стр.

1 голос
/ 16 июля 2015

Вот более сложное решение, не требующее внешнего CSS: 

function changeCursor(elem, cursor, decendents) {
    if (!elem) elem=$('body');

    // remove all classes starting with changeCursor-
    elem.removeClass (function (index, css) {
        return (css.match (/(^|\s)changeCursor-\S+/g) || []).join(' ');
    });

    if (!cursor) return;

    if (typeof decendents==='undefined' || decendents===null) decendents=true;

    let cname;

    if (decendents) {
        cname='changeCursor-Dec-'+cursor;
        if ($('style:contains("'+cname+'")').length < 1) $('<style>').text('.'+cname+' , .'+cname+' * { cursor: '+cursor+' !important; }').appendTo('head');
    } else {
        cname='changeCursor-'+cursor;
        if ($('style:contains("'+cname+'")').length < 1) $('<style>').text('.'+cname+' { cursor: '+cursor+' !important; }').appendTo('head');
    }

    elem.addClass(cname);
}

с этим вы можете сделать: 

changeCursor(, 'wait'); // wait cursor on all decendents of body
changeCursor($('#id'), 'wait', false); // wait cursor on elem with id only
changeCursor(); // remove changed cursor from body
1 голос
/ 15 октября 2008

Попробуйте css: 

html.waiting {
cursor: wait;
}

Похоже, что если свойство body используется вместо html, оно не показывает курсор ожидания на всей странице. Кроме того, если вы используете класс CSS, вы можете легко контролировать, когда он действительно показывает его.

0 голосов
/ 22 февраля 2018

Два моих пенса:

Шаг 1: Объявите массив. Это будет использоваться для хранения исходных курсоров, которые были назначены: 

var vArrOriginalCursors = new Array(2);

Шаг 2: Реализовать функцию cursorModifyEntirePage 

 function CursorModifyEntirePage(CursorType){
    var elements = document.body.getElementsByTagName('*');
    alert("These are the elements found:" + elements.length);
    let lclCntr = 0;
    vArrOriginalCursors.length = elements.length; 
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        vArrOriginalCursors[lclCntr] = elements[lclCntr].style.cursor;
        elements[lclCntr].style.cursor = CursorType;
    }
}

Что это делает: Получает все элементы на странице. Сохраняет назначенные им исходные курсоры в массиве, объявленном на шаге 1. Изменяет курсоры на нужный курсор, передаваемый параметром CursorType

Шаг 3: Восстановите курсоры на странице 

 function CursorRestoreEntirePage(){
    let lclCntr = 0;
    var elements = document.body.getElementsByTagName('*');
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        elements[lclCntr].style.cursor = vArrOriginalCursors[lclCntr];
    }
}

Я запустил это в приложении, и оно работает нормально. Единственное предостережение в том, что я не проверял его, когда вы динамически добавляете элементы.

Страница:
...