전체 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>

나중에 편집 ...
그것은 파이어 폭스와 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

나는 당신이 이것을 통제 할 수 없다는 것을 이해한다. 그러나 당신은 1보다 높은 z-index로 몸 전체를 덮는 "마스킹"div로 갈 수있다. 원한다면 div의 중앙 부분은 로딩 메시지를 포함 할 수있다.

그런 다음 커서를 div에서 기다리도록 설정하고 마스킹 div "아래"에있는 링크에 대해 걱정할 필요가 없습니다. 다음은 "masking div"에 대한 CSS 예제입니다.

body {높이 : 100 %; }
div # mask {커서 : 대기; Z- 색인 : 999; 높이 : 100 %; 너비 : 100 %; }

Question 3

Dorward에서 게시 한 CSS의 약간 수정 된 버전을 사용하는 경우

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

그런 다음 모든 ajax 호출에 대해 작동하도록 정말 간단한 jQuery 를 추가 할 수 있습니다 .

$(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 클래스에서 실행되므로 this 및 MyClass (MyClass는 싱글 톤입니다).

이 페이지에 설명 된대로 div를 표시하려고 할 때 동일한 문제가 발생했습니다. IE에서는 함수가 실행 된 후에 표시되었습니다. 그래서 나는이 트릭이 그 문제도 해결할 것이라고 생각합니다.

게시물 작성자에게 감사합니다. 당신은 정말 내 하루를 만들었습니다!

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이 적용되어 사용되는 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");

대기 커서와 기본 커서를 각각 설정합니다.