代码之家 › 专栏 › 技术社区 › Aleris

在整个HTML页面上等待光标

dynamic-css css html javascript

Aleris · 技术社区 · 16 年前

是否可以简单地将整个HTML页面上的光标设置为“等待”?其目的是向用户展示Ajax调用完成时发生的事情。下面的代码显示了我尝试的简化版本,并演示了我遇到的问题:

如果元素(id1)设置了光标样式,它将忽略主体上的设置(显然)
某些元素具有默认的光标样式(A),悬停时不会显示等待光标。
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 回复 | 直到 7 年前

Eric Wendelin 16 年前

我知道你可能无法控制这个,但是你可以选择一个覆盖整个身体的“屏蔽”分区,其中z索引高于1。如果您愿意,DIV的中心部分可以包含一个加载消息。

然后,您可以将光标设置为等待DIV,不必担心链接,因为它们“位于”您的掩蔽DIV下。下面是一些“掩蔽DIV”的CSS示例:

body { height: 100%; }
div#mask { cursor: wait; z-index: 999; height: 100%; width: 100%; }

107

Ale 9 年前

如果你使用这个稍微修改过的版本的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"); });
});

Kibbee 16 年前

这似乎在火狐中有效

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

*部分确保当您将鼠标悬停在链接上时,光标不会发生变化。尽管链接仍然可以点击。

pasx 13 年前

今天我已经为这个问题苦苦挣扎了几个小时。基本上,在火狐中一切都正常,但(当然)不是在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中,它是在函数执行之后显示的。所以我想这个技巧也能解决这个问题。

多亏了作者格伦格夫无数的时间。你真让我高兴!!!!

redbmk 12 年前

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

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

unexist 16 年前

为什么你不直接用这些精美的加载图形(例如: http://ajaxload.info/ )?等待的光标是浏览器本身-所以每当它出现时,它与浏览器有关系,而不是与页面有关。

jere_hr 13 年前

我知道最简单的方法是使用jquery,如下所示:

$('*').css('cursor','wait');

GameFreak 16 年前

试试CSS:

html.waiting {
cursor: wait;
}

如果财产 body 用作 html 它不会在整个页面上显示等待光标。此外,如果使用CSS类,则可以轻松地控制它实际显示的时间。

kofifus 9 年前

这里有一个更复杂的解决方案,不需要外部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

kulNinja 11 年前

BlockUI是一切的答案。试一试。

http://www.malsup.com/jquery/block/

ungalcrys 7 年前

我用的是 Eric Wendelin 的解决方案。它将在整个主体上显示一个透明的动画覆盖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;">&nbsp;</div>
    ... rest of html ...

indiaaditya 7 年前

我的两便士:

步骤1: 声明数组。这将用于存储分配的原始光标:

var vArrOriginalCursors = new Array(2);

步骤2: 实现函数cursorModifyEntrepage

 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];
    }
}

我已经在一个应用程序中运行了这个程序,它工作得很好。唯一需要注意的是,在动态添加元素时,我没有测试它。