Ale*_*ris 87 html javascript css dynamic-css
是否可以以简单的方式将光标设置为整个html页面上的"等待"？想法是在完成ajax调用时向用户显示正在进行的操作.下面的代码显示了我尝试过的简化版本,并演示了我遇到的问题:
考试:
<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>
此解决方案仅显示等待光标但允许单击.
Dan*_*ani 109
如果您使用从Dorward发布的这个稍微修改过的CSS版本,
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"); });
});
Eri*_*lin 33
我知道你可能无法控制这个,但你可能会选择一个覆盖整个身体的"掩蔽"div,其z-index大于1.如果你愿意,div的中心部分可以包含一个加载消息.
然后,您可以将光标设置为等待div,而不必担心链接,因为它们位于您的屏蔽div"下方".这是"masking div"的一些示例CSS:
body { height: 100%; }
div#mask { cursor: wait; z-index: 999; height: 100%; width: 100%; }
Kib*_*bee 12
这似乎适用于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类中运行,因此this和MyClass(MyClass是一个单例).
在尝试显示本页所述的div时遇到了同样的问题.在IE中,它在函数执行后显示.所以我想这个技巧也可以解决这个问题.
非常感谢glenngv这篇文章的作者.你真的让我的一天!