รอเคอร์เซอร์เหนือหน้า html ทั้งหมด

Question 1

เป็นไปได้ไหมที่จะตั้งค่าเคอร์เซอร์เป็น 'รอ' บนหน้า 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>

โซลูชันนี้แสดงเฉพาะเคอร์เซอร์รอ แต่อนุญาตให้คลิก

Question 2

ฉันเข้าใจว่าคุณอาจไม่สามารถควบคุมสิ่งนี้ได้ แต่คุณอาจใช้ div "มาสก์" ที่ครอบคลุมเนื้อหาทั้งหมดโดยมีดัชนี z สูงกว่า 1 ส่วนตรงกลางของ div อาจมีข้อความกำลังโหลดหากคุณต้องการ

จากนั้นคุณสามารถตั้งค่าเคอร์เซอร์ให้รอบน div และไม่ต้องกังวลกับลิงก์เนื่องจากลิงก์เหล่านั้นอยู่ "ภายใต้" การปิดบัง div ของคุณ ต่อไปนี้เป็นตัวอย่าง CSS สำหรับ "การปิดบัง div":

ร่างกาย {ส่วนสูง: 100%; }
div # mask {เคอร์เซอร์: รอ; ดัชนี z: 999; ความสูง: 100%; ความกว้าง: 100%; }

Question 3

หากคุณใช้ 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"); });
});

Question 4

ดูเหมือนว่าจะใช้ได้ใน firefox

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

ส่วน * ช่วยให้มั่นใจได้ว่าเคอร์เซอร์จะไม่เปลี่ยนแปลงเมื่อคุณวางเมาส์เหนือลิงก์ แม้ว่าลิงก์จะยังคงสามารถคลิกได้

Question 5

วันนี้ฉันต่อสู้กับปัญหานี้มาหลายชั่วโมงแล้ว โดยทั่วไปทุกอย่างทำงานได้ดีใน 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 จะแสดงขึ้นหลังจากเรียกใช้ฟังก์ชันแล้ว ดังนั้นฉันเดาว่าเคล็ดลับนี้จะช่วยแก้ปัญหานั้นได้เช่นกัน

ขอบคุณ zillion เวลา glenngv ผู้เขียนโพสต์ คุณทำให้วันของฉันจริงๆ !!!

Question 6

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

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

Question 7

ทำไมคุณไม่ใช้กราฟิกโหลดแฟนซีเหล่านี้ (เช่น: http://ajaxload.info/ ) เคอร์เซอร์รอนั้นมีไว้สำหรับเบราว์เซอร์เองดังนั้นเมื่อใดก็ตามที่ปรากฏว่ามีอะไรเกี่ยวข้องกับเบราว์เซอร์ไม่ใช่กับหน้า

Question 8

วิธีที่ง่ายที่สุดที่ฉันรู้คือใช้ JQuery ดังนี้:

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

Question 9

ลอง css:

html.waiting {
cursor: wait;
}

ดูเหมือนว่าหากใช้คุณสมบัติbodyเป็น apposed จะhtmlไม่แสดงเคอร์เซอร์รออยู่บนทั้งหน้า นอกจากนี้หากคุณใช้คลาส css คุณสามารถควบคุมได้อย่างง่ายดายเมื่อแสดงจริง

Question 10

นี่คือโซลูชันที่ซับซ้อนยิ่งขึ้นที่ไม่ต้องใช้ 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

Question 11

ฉันใช้การดัดแปลงโซลูชันของ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 ...

Question 12

เพนนีสองตัวของฉัน:

ขั้นตอนที่ 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];
    }
}

ฉันเรียกใช้สิ่งนี้ในแอปพลิเคชันและใช้งานได้ดี ข้อแม้เพียงอย่างเดียวคือฉันไม่ได้ทดสอบเมื่อคุณเพิ่มองค์ประกอบแบบไดนามิก

Question 13

ในการตั้งค่าเคอร์เซอร์จาก JavaScript สำหรับทั้งหน้าต่างให้ใช้:

document.documentElement.style.cursor = 'wait';

จาก CSS:

html { cursor: wait; }

เพิ่มตรรกะเพิ่มเติมตามต้องการ

Question 14

BlockUI คือคำตอบสำหรับทุกสิ่ง ให้มันลอง.

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

Question 15

JavaScript บริสุทธิ์นี้ดูเหมือนจะทำงานได้ดี ... ทดสอบบนเบราว์เซอร์ FireFox, Chrome และ Edge

ฉันไม่แน่ใจเกี่ยวกับประสิทธิภาพของสิ่งนี้หากคุณมีองค์ประกอบมากเกินไปในหน้าเว็บของคุณและคอมพิวเตอร์ที่ทำงานช้า ... ลองใช้ดู

ตั้งค่าเคอร์เซอร์ให้ทุกองค์ประกอบรอ:

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "wait");

ตั้งค่าเคอร์เซอร์สำหรับองค์ประกอบทั้งหมดกลับเป็นค่าเริ่มต้น:

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "default");

อีกทางเลือกหนึ่ง (และอาจอ่านได้มากกว่าเล็กน้อย) คือการสร้างฟังก์ชัน setCursor ดังนี้:

function setCursor(cursor)
{
    var x = document.querySelectorAll("*");

    for (var i = 0; i < x.length; i++)
    {
        x[i].style.cursor = cursor;
    }
}

แล้วโทร

setCursor("wait");

และ

setCursor("default");

เพื่อตั้งค่าเคอร์เซอร์รอและเคอร์เซอร์เริ่มต้นตามลำดับ