如何在整个html页面上设置等待游标?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (72)

是否有可能以简单的方式将光标设置为“等待”整个html页面?这个想法是在ajax调用完成时向用户显示正在发生的事情。下面的代码显示了我尝试的简化版本,并演示了遇到的问题:

  1. 如果一个元素(#id1)有一个光标样式集,它会忽略在body上设置的一个(显然)
  2. 某些元素具有默认的光标样式(a),并且不会在悬停时显示等待光标
  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

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

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

该解决方案仅显示等待光标,但允许点击。

提问于
用户回答回答于

我知道可能无法控制这一点,但可能会选择一个“掩蔽”div来覆盖整个z-index高于1的主体。如果愿意,div的中间部分可以包含一个加载消息。

然后,可以将光标设置为在div上等待并且不必担心链接,因为它们位于遮罩div的“下方”。以下是“masking div”的一些示例CSS:

身体{身高:100%; }
div#mask {cursor:wait; z-index:999; 身高:100%; 宽度:100%; }
用户回答回答于

如果使用从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"); });
});

扫码关注云+社区

领取腾讯云代金券