在整個html頁面上等待光標

是否可以通過簡單的方式將光標設置爲「等待」整個html頁面？這個想法是在ajax調用完成時向用戶顯示正在發生的事情。下面的代碼顯示的是我的嘗試，也證明我遇到的問題的簡化版本：在整個html頁面上等待光標

如果一個元素（＃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的點擊（感謝基比）

後來的後來編輯...
從Dorward一個簡單的辦法：

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

然後

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

此解決方案僅顯示等待光標，但允許點擊。

來源

2008-10-10 Aleris

因爲看起來我無法改變選擇元素的光標。有沒有辦法改變select元素的光標？ – Biswanath 2009-09-08 09:53:13

我知道你可能無法控制這個，但是你可以改爲覆蓋整個身體的z-index大於1的「masking」div。div的中心部分可以包含一個加載消息如果你喜歡。

然後，您可以將光標設置爲等待div，不必擔心鏈接，因爲它們位於屏蔽div下方。下面是爲「掩蓋格」一些示例CSS：

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

來源

2008-10-10 20:46:08

這通常會導致問題。在Firefox中，在整個頁面上放置固定的div會導致整個頁面變得無法點擊。即你不能點擊鏈接，因爲你沒有點擊你點擊鏈接前的div的鏈接。 – Kibbee 2008-10-10 20:59:40

在Firefox中可以正常工作。在IE中沒有運氣:(.）在IE中，它的行爲與div不存在一致。唯一能達到預期行爲的方法是在div背景上設置一個顏色 – Aleris 2008-10-10 21:31:54

感謝Kibbee的觀察，這是一個有效的點 – Aleris 2008-10-10 21:34:58

爲什麼你不使用其中一種花式加載圖形（例如：http://ajaxload.info/）？等待遊標是爲瀏覽器本身 - 所以無論何時出現，它都與瀏覽器有關，而與頁面無關。

來源

2008-10-10 20:27:13 unexist

我同意部分。至少在窗口上，如果瀏覽器本身正在加載一個頁面，出現的光標是`cursor：progress`而不是`cursor：wait`。使用該光標將更符合瀏覽器的用戶體驗。但我真的很喜歡改變光標的想法，以表明瀏覽器正在工作，就像它在加載頁面時工作一樣。 – flu 2013-10-30 10:29:06

這似乎在Firefox

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

上班*部分確保當你將鼠標懸停在鏈接光標並沒有改變。儘管鏈接仍然可以點擊。

來源

2008-10-10 21:02:38 Kibbee

嘗試的CSS：

html.waiting { 
cursor: wait; 
}

看來，如果使用屬性body作爲並列於html它不顯示等待光標在整個頁面。此外，如果您使用css類，則可以輕鬆控制它何時實際顯示它。

來源

2008-10-14 20:28:40 GameFreak

102

如果您利用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"); }); 
});

來源

2012-05-29 15:11:16 Dani

我知道的最簡單的方法是usi ng這樣的JQuery：

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

來源

2012-07-25 07:08:08

我一直在努力解決這個問題今天幾個小時。基本上所有東西都在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發貼的作者。你真的讓我的一天！

來源

2012-07-30 16:05:51 pasx

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

的jQuery：$('body').toggleClass('waiting');

來源

2012-10-19 01:26:19 redbmk

BlockUI是一切問題的答案。試一試。

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

來源

2013-09-10 17:11:19 kulNinja

這裏是不需要外部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

來源

2015-07-16 05:22:20 kofifus

我用的Eric Wendelin的一個適應解。

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

它會顯示一個透明，動畫疊加等待DIV遍全身，點擊將由等待DIV而可見的被阻止

HTML：

<body> 
    <div id="waitMask" style="display:none;">&nbsp;</div> 
    ... rest of html ...

來源

2017-10-17 16:00:11 ungalcrys

我的兩個便士：

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

我對遊標在應用程序中運行它，它工作正常。唯一需要注意的是，當您動態添加元素時，我沒有測試過它。

來源

2018-02-22 15:32:12 indiaaditya

在整個html頁面上等待光標

回答

相關問題