[javascript] 전체 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');

[javascript] 전체 html 페이지 위에 커서 대기

답변

답변

답변

답변

답변

답변

답변