Подождите курсор над всей html-страницей
можно ли просто установить курсор на "ожидание" на всей html-странице? Идея состоит в том, чтобы показать пользователю, что что-то происходит во время выполнения вызова ajax. Приведенный ниже код показывает упрощенную версию того, что я пробовал, а также демонстрирует проблемы, с которыми я сталкиваюсь:
- если элемент (#id1) имеет набор стилей курсора, он будет игнорировать один набор на теле (очевидно)
- некоторые элементы имеют стиль курсора по умолчанию (a) и не будут показывать подождите курсор при наведении
- элемент тела имеет определенную высоту в зависимости от содержимого, и если страница короткая, курсор не будет отображаться ниже в футере
тест:
<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 ответов:
Я понимаю, что вы не можете контролировать это, но вместо этого вы можете пойти на "маскировку" div, которая покрывает все тело с индексом z выше 1. Центральная часть div может содержать сообщение о загрузке, если хотите.
затем вы можете установить курсор на ожидание div и не беспокоиться о ссылках, поскольку они находятся "под" вашим маскирующим div. Вот пример CSS для "маскировки div":
body { height: 100%; } div#mask { cursor: wait; z-index: 999; height: 100%; width: 100%; }
Если вы используете эту слегка измененную версию 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"); }); });
Это, кажется, работает в Firefox
<style> *{ cursor: inherit;} body{ cursor: wait;} </style>
часть * гарантирует, что курсор не изменится при наведении на ссылку. Хотя ссылки все равно будут кликабельными.
Я боролся с этой проблемой в течение нескольких часов сегодня. В основном все работало просто отлично в 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, следовательно, это и MyClass (MyClass - это одиночка.)
У меня были те же проблемы при попытке отобразить div, как описано на этой странице. В IE он показывался после выполнения функции. Поэтому я думаю, что этот трюк тоже решит эту проблему.
огромное спасибо glenngv автору поста. Ты действительно сделал мой день!!!
Почему бы вам просто не использовать один из этих причудливых графиков загрузки (например:http://ajaxload.info/)? ожидающий курсор предназначен для самого браузера-поэтому всякий раз, когда он появляется, он имеет какое-то отношение к браузеру, а не к странице.
самый простой способ, который я знаю, это использовать JQuery следующим образом:
$('*').css('cursor','wait');
попробуйте css:
html.waiting { cursor: wait; }
кажется, что если собственность
body
используется в качестве приложения кhtml
он не показывает курсор ожидания по всей странице. Кроме того, если вы используете класс css, вы можете легко контролировать, когда он действительно показывает его.
вот более сложное решение, которое не требует внешнего 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
я использовал адаптации Эрик Венделин'ы. Он покажет прозрачное, анимированное наложение wait-div по всему телу, щелчок будет заблокирован wait-div, пока виден:
css:
div#waitMask { z-index: 999; position: absolute; top: 0; right: 0; height: 100%; width: 100%; cursor: wait; background-color: #000; opacity: 0; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; }
js:
// to show it $("#waitMask").show(); $("#waitMask").css("opacity"); // must read it first $("#waitMask").css("opacity", "0.8"); ... // to hide it $("#waitMask").css("opacity", "0"); setTimeout(function() { $("#waitMask").hide(); }, 500) // wait for animation to end
html:
<body> <div id="waitMask" style="display:none;"> </div> ... rest of html ...
мои два пенса:
Шаг 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]; } }
я запустил это в приложении, и он отлично работает. Единственное предостережение заключается в том, что я не проверял его, когда вы динамически добавляете элементы.