Poczekaj na kursor na całej stronie html

Question 1

Czy można w prosty sposób ustawić kursor na „czekaj” na całej stronie html? Chodzi o to, aby pokazać użytkownikowi, że coś się dzieje podczas kończenia połączenia AJAX. Poniższy kod pokazuje uproszczoną wersję tego, co wypróbowałem, a także pokazuje problemy, na które napotykam:

jeśli element (# id1) ma ustawiony styl kursora, zignoruje ten ustawiony na body (oczywiście)
niektóre elementy mają domyślny styl kursora (a) i nie będą wyświetlać kursora oczekiwania po najechaniu
element body ma określoną wysokość w zależności od zawartości i jeśli strona jest krótka, kursor nie pojawi się pod stopką

Test:

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

Później edycja ...
Działało w Firefox i IE z:

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>

Problem z tym rozwiązaniem (lub jego cechą) polega na tym, że zapobiegnie ono kliknięciom z powodu nakładającego się elementu div (dzięki Kibbee)

Później później edytuj ...
Prostsze rozwiązanie od Dorward:

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

i wtedy

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

To rozwiązanie pokazuje tylko kursor oczekiwania, ale umożliwia kliknięcia.

Question 2

Rozumiem, że możesz nie mieć nad tym kontroli, ale możesz zamiast tego wybrać element div „maskujący”, który obejmuje całą treść z indeksem z wyższym niż 1. Środkowa część elementu div może zawierać komunikat o ładowaniu, jeśli chcesz.

Następnie możesz ustawić kursor tak, aby czekał na element div i nie musisz martwić się o linki, ponieważ znajdują się one „pod” Twoim elementem div maskującym. Oto przykład CSS dla „elementu div maskującego”:

body {wysokość: 100%; }
div # mask {kursor: czekaj; indeks z: 999; wysokość: 100%; szerokość: 100%; }

Question 3

Jeśli używasz tej nieco zmodyfikowanej wersji CSS, którą opublikowałeś od Dorward,

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

możesz wtedy dodać naprawdę proste jQuery do pracy dla wszystkich wywołań ajax:

$(document).ready(function () {
    $(document).ajaxStart(function () { $("html").addClass("wait"); });
    $(document).ajaxStop(function () { $("html").removeClass("wait"); });
});

lub dla starszych wersji jQuery (przed 1.9):

$(document).ready(function () {
    $("html").ajaxStart(function () { $(this).addClass("wait"); });
    $("html").ajaxStop(function () { $(this).removeClass("wait"); });
});

Question 4

Wydaje się, że to działa w przeglądarce Firefox

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

Część * zapewnia, że kursor nie zmienia się po najechaniu kursorem na łącze. Chociaż linki nadal będą klikalne.

Question 5

Walczę z tym problemem od wielu godzin. W zasadzie wszystko działało dobrze w FireFox, ale (oczywiście) nie w IE. W IE kursor oczekiwania pokazywał się PO wykonaniu czasochłonnej funkcji.

W końcu znalazłem sztuczkę na tej stronie: http://www.codingforums.com/archive/index.php/t-37185.html

Kod:

//...
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) {...}

Mój kod działa w klasie JavaScript, stąd this i MyClass (MyClass to singleton).

Miałem te same problemy, gdy próbowałem wyświetlić element div, jak opisano na tej stronie. W IE pokazywał się po wykonaniu funkcji. Więc myślę, że ta sztuczka rozwiązałaby również ten problem.

Dzięki zillion czasu glenngv autorowi posta. Naprawdę sprawiłeś, że mój dzień !!!

Question 6

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

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

Question 7

Dlaczego po prostu nie użyjesz jednej z tych wymyślnych grafik do ładowania (np .: http://ajaxload.info/ )? Kursor oczekiwania jest przeznaczony dla samej przeglądarki - więc gdy się pojawi, ma coś wspólnego z przeglądarką, a nie ze stroną.

Question 8

Najłatwiejszy sposób, jaki znam, to używanie JQuery w następujący sposób:

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

Question 9

Wypróbuj CSS:

html.waiting {
cursor: wait;
}

Wygląda na to, że jeśli właściwość bodyjest używana jako dołączona do htmlniej, kursor oczekiwania na całej stronie nie jest wyświetlany. Ponadto, jeśli używasz klasy css, możesz łatwo kontrolować, kiedy faktycznie ją wyświetla.

Question 10

Oto bardziej rozbudowane rozwiązanie, które nie wymaga zewnętrznego 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);
}

dzięki temu możesz:

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

Użyłem adaptacji rozwiązania Erica Wendelina . Wyświetli przezroczystą, animowaną nakładkę elementu div na całe ciało, kliknięcie zostanie zablokowane przez element div wait, gdy będzie widoczny:

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

Moje dwa pensy:

Krok 1: Zadeklaruj tablicę. Będzie to używane do przechowywania oryginalnych kursorów, które zostały przypisane:

var vArrOriginalCursors = new Array(2);

Krok 2: Zaimplementuj funkcję 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;
    }
}

Co robi: Pobiera wszystkie elementy na stronie. Przechowuje oryginalne kursory przypisane do nich w tablicy zadeklarowanej w kroku 1. Modyfikuje kursory na żądany kursor przekazany przez parametr CursorType

Krok 3: Przywróć kursory na stronie

 function CursorRestoreEntirePage(){
    let lclCntr = 0;
    var elements = document.body.getElementsByTagName('*');
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        elements[lclCntr].style.cursor = vArrOriginalCursors[lclCntr];
    }
}

Uruchomiłem to w aplikacji i działa dobrze. Jedynym zastrzeżeniem jest to, że nie testowałem go, gdy dynamicznie dodajesz elementy.

Question 13

Aby ustawić kursor z JavaScript dla całego okna, użyj:

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

Z CSS:

html { cursor: wait; }

W razie potrzeby dodaj dalszą logikę.

Question 14

BlockUI jest odpowiedzią na wszystko. Spróbuj.

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

Question 15

Ten czysty JavaScript wydaje się działać całkiem nieźle ... przetestowany w przeglądarkach FireFox, Chrome i Edge.

Nie jestem pewien co do wydajności, gdybyś miał nadmiar elementów na swojej stronie i wolny komputer ... spróbuj i zobacz.

Ustaw kursor na czekanie wszystkich elementów:

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

Ustaw kursor dla wszystkich elementów z powrotem na domyślne:

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

Alternatywną (i być może nieco bardziej czytelną) wersją byłoby utworzenie funkcji setCursor w następujący sposób:

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

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

a następnie zadzwoń

setCursor("wait");

i

setCursor("default");

aby ustawić odpowiednio kursor oczekiwania i kursor domyślny.

Answer 1

Czy można w prosty sposób ustawić kursor na „czekaj” na całej stronie html? Chodzi o to, aby pokazać użytkownikowi, że coś się dzieje podczas kończenia połączenia AJAX. Poniższy kod pokazuje uproszczoną wersję tego, co wypróbowałem, a także pokazuje problemy, na które napotykam:

jeśli element (# id1) ma ustawiony styl kursora, zignoruje ten ustawiony na body (oczywiście)
niektóre elementy mają domyślny styl kursora (a) i nie będą wyświetlać kursora oczekiwania po najechaniu
element body ma określoną wysokość w zależności od zawartości i jeśli strona jest krótka, kursor nie pojawi się pod stopką

Test:

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

Później edycja ...
Działało w Firefox i IE z:

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>

Problem z tym rozwiązaniem (lub jego cechą) polega na tym, że zapobiegnie ono kliknięciom z powodu nakładającego się elementu div (dzięki Kibbee)

Później później edytuj ...
Prostsze rozwiązanie od Dorward:

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

i wtedy

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

To rozwiązanie pokazuje tylko kursor oczekiwania, ale umożliwia kliknięcia.

Answer 2

Jak się wydaje, nie jestem w stanie zmienić kursora dla wybranych elementów. Czy istnieje również sposób zmiany kursora dla wybranego elementu?

Biswanath,

Answer 3

34

Rozumiem, że możesz nie mieć nad tym kontroli, ale możesz zamiast tego wybrać element div „maskujący”, który obejmuje całą treść z indeksem z wyższym niż 1. Środkowa część elementu div może zawierać komunikat o ładowaniu, jeśli chcesz.

Następnie możesz ustawić kursor tak, aby czekał na element div i nie musisz martwić się o linki, ponieważ znajdują się one „pod” Twoim elementem div maskującym. Oto przykład CSS dla „elementu div maskującego”:

body {wysokość: 100%; }
div # mask {kursor: czekaj; indeks z: 999; wysokość: 100%; szerokość: 100%; }

Eric Wendelin
źródło

3

Może to często powodować problemy. W przeglądarce Firefox umieszczenie stałego elementu div na całej stronie powoduje, że cała strona staje się niemożliwa do kliknięcia. tj. nie możesz klikać łączy, ponieważ nie klikasz linku, ale klikasz element div przed łączem.

Kibbee

1

Działa dobrze w przeglądarce Firefox. Brak powodzenia w IE :(. W IE zachowuje się dokładnie tak, jakby nie było elementu div. Jedynym sposobem uzyskania pożądanego zachowania jest ustawienie koloru tła div.

Aleris

2

Ok, po dłuższym graniu w końcu zadziałało: div # mask {display: none; kursor: czekaj; indeks z: 9999; pozycja: bezwzględna; góra: 0; po lewej: 0; wysokość: 100%; szerokość: 100%; background-color: #fff; krycie: 0; filter: alpha (opacity = 0);}

Aleris

Zgoda, Kibbee, to naprawdę zależy od twojego pożądanego zachowania. Wygląda na to, że Aleris nie chce, aby użytkownik nic robił (stąd kursor oczekiwania), dopóki AJAX nie oddzwoni.

Eric Wendelin

3

Użyłem position: ustalone, więc zawsze jest na ekranie, z position: bezwzględne, nie wyświetlało się, gdy byłem na dole strony.

Jj.

Answer 4

3

Może to często powodować problemy. W przeglądarce Firefox umieszczenie stałego elementu div na całej stronie powoduje, że cała strona staje się niemożliwa do kliknięcia. tj. nie możesz klikać łączy, ponieważ nie klikasz linku, ale klikasz element div przed łączem.

Kibbee

Answer 5

1

Działa dobrze w przeglądarce Firefox. Brak powodzenia w IE :(. W IE zachowuje się dokładnie tak, jakby nie było elementu div. Jedynym sposobem uzyskania pożądanego zachowania jest ustawienie koloru tła div.

Aleris

Answer 6

2

Ok, po dłuższym graniu w końcu zadziałało: div # mask {display: none; kursor: czekaj; indeks z: 9999; pozycja: bezwzględna; góra: 0; po lewej: 0; wysokość: 100%; szerokość: 100%; background-color: #fff; krycie: 0; filter: alpha (opacity = 0);}

Aleris

Answer 7

Zgoda, Kibbee, to naprawdę zależy od twojego pożądanego zachowania. Wygląda na to, że Aleris nie chce, aby użytkownik nic robił (stąd kursor oczekiwania), dopóki AJAX nie oddzwoni.

Eric Wendelin

Answer 8

3

Użyłem position: ustalone, więc zawsze jest na ekranie, z position: bezwzględne, nie wyświetlało się, gdy byłem na dole strony.

Jj.

Answer 9

111

Jeśli używasz tej nieco zmodyfikowanej wersji CSS, którą opublikowałeś od Dorward,

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

możesz wtedy dodać naprawdę proste jQuery do pracy dla wszystkich wywołań ajax:

$(document).ready(function () {
    $(document).ajaxStart(function () { $("html").addClass("wait"); });
    $(document).ajaxStop(function () { $("html").removeClass("wait"); });
});

lub dla starszych wersji jQuery (przed 1.9):

$(document).ready(function () {
    $("html").ajaxStart(function () { $(this).addClass("wait"); });
    $("html").ajaxStop(function () { $(this).removeClass("wait"); });
});

Dani
źródło

4

Naprawdę chcę użyć tej odpowiedzi ... dlaczego nie jest ona zaakceptowana?

ponury.pingwin

1

@ gloomy.penguin To pytanie było aktywne ponad 3 lata przed moją odpowiedzią, ale natknąłem się na nie w moich własnych poszukiwaniach rozwiązania i postanowiłem podzielić się rozwiązaniem, z którego ostatecznie skorzystałem: mieszanką odpowiedzi Dorwarda, jQuery, i rozsądek Kyle'a. To trochę różni się od tego, czego szukał OP, ale jeśli to działa, użyj go! :)

Dani

Zgadzam się. Działa świetnie i IMHO powinna to być akceptowana odpowiedź.

savehansson,

1

Jeśli to nie działa, sprawdź tutaj: JQuery.com „Od wersji JQuery 1.9 globalne zdarzenia Ajax są wyzwalane tylko w elemencie dokumentu”. Np .:$(document).ajaxStart(function () { $("html").addClass("wait"); });

Debbie A,

1

Przed usunięciem klasy wait prawdopodobnie zechcesz sprawdzić, czy $.activewynosi 0, w przypadku, gdy wykonano wiele żądań i wszystkie nie są jeszcze zakończone.

Shane Reustle

Answer 10

4

Naprawdę chcę użyć tej odpowiedzi ... dlaczego nie jest ona zaakceptowana?

ponury.pingwin

Answer 11

1

@ gloomy.penguin To pytanie było aktywne ponad 3 lata przed moją odpowiedzią, ale natknąłem się na nie w moich własnych poszukiwaniach rozwiązania i postanowiłem podzielić się rozwiązaniem, z którego ostatecznie skorzystałem: mieszanką odpowiedzi Dorwarda, jQuery, i rozsądek Kyle'a. To trochę różni się od tego, czego szukał OP, ale jeśli to działa, użyj go! :)

Dani

Answer 12

Zgadzam się. Działa świetnie i IMHO powinna to być akceptowana odpowiedź.

savehansson,

Answer 13

1

Jeśli to nie działa, sprawdź tutaj: JQuery.com „Od wersji JQuery 1.9 globalne zdarzenia Ajax są wyzwalane tylko w elemencie dokumentu”. Np .:$(document).ajaxStart(function () { $("html").addClass("wait"); });

Debbie A,

Answer 14

1

Przed usunięciem klasy wait prawdopodobnie zechcesz sprawdzić, czy $.activewynosi 0, w przypadku, gdy wykonano wiele żądań i wszystkie nie są jeszcze zakończone.

Shane Reustle

Answer 15

12

Wydaje się, że to działa w przeglądarce Firefox

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

Część * zapewnia, że kursor nie zmienia się po najechaniu kursorem na łącze. Chociaż linki nadal będą klikalne.

Kibbee
źródło

* {kursor: czekaj! ważne; } byłby prostszy i bardziej prawdopodobny do działania w IE (który ma wiele błędów związanych ze słowem kluczowym inherit)

Quentin

1

Czy * {kursor: czekaj} można zastosować z javascript? - z wyjątkiem iteracji wszystkich elementów w całym DOM :)

Aleris

może mógłbyś dodać element style i ustawić innerHTML. Nie byłoby zbyt eleganckie, ale mogłoby się udać.

Kibbee

3

.wait, .wait * {cusor: czekaj! ważne; }, a następnie ustaw document.body.className = 'czekaj'; z JavaScript

Quentin,

1

Zauważ, że w powyższym komentarzu znajduje się literówka „kursor”, na wypadek gdybyś go skopiował / wkleił.

devios1

Answer 16

* {kursor: czekaj! ważne; } byłby prostszy i bardziej prawdopodobny do działania w IE (który ma wiele błędów związanych ze słowem kluczowym inherit)

Quentin

Answer 17

1

Czy * {kursor: czekaj} można zastosować z javascript? - z wyjątkiem iteracji wszystkich elementów w całym DOM :)

Aleris

Answer 18

może mógłbyś dodać element style i ustawić innerHTML. Nie byłoby zbyt eleganckie, ale mogłoby się udać.

Kibbee

Answer 19

3

.wait, .wait * {cusor: czekaj! ważne; }, a następnie ustaw document.body.className = 'czekaj'; z JavaScript

Quentin,

Answer 20

1

Zauważ, że w powyższym komentarzu znajduje się literówka „kursor”, na wypadek gdybyś go skopiował / wkleił.

devios1

Answer 21

Walczę z tym problemem od wielu godzin. W zasadzie wszystko działało dobrze w FireFox, ale (oczywiście) nie w IE. W IE kursor oczekiwania pokazywał się PO wykonaniu czasochłonnej funkcji.

W końcu znalazłem sztuczkę na tej stronie: http://www.codingforums.com/archive/index.php/t-37185.html

Kod:

//...
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) {...}

Mój kod działa w klasie JavaScript, stąd this i MyClass (MyClass to singleton).

Miałem te same problemy, gdy próbowałem wyświetlić element div, jak opisano na tej stronie. W IE pokazywał się po wykonaniu funkcji. Więc myślę, że ta sztuczka rozwiązałaby również ten problem.

Dzięki zillion czasu glenngv autorowi posta. Naprawdę sprawiłeś, że mój dzień !!!

Answer 22

4

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

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

redbmk
źródło

Answer 23

2

Dlaczego po prostu nie użyjesz jednej z tych wymyślnych grafik do ładowania (np .: http://ajaxload.info/ )? Kursor oczekiwania jest przeznaczony dla samej przeglądarki - więc gdy się pojawi, ma coś wspólnego z przeglądarką, a nie ze stroną.

nieistniejący
źródło

Zgadzam się częściowo. Przynajmniej w oknach kursor, który się pojawia, jeśli przeglądarka sama ładuje stronę, cursor: progressnie cursor: wait. Korzystanie z tego kursora byłoby znacznie bardziej spójne z doświadczeniem użytkownika przeglądarki. Ale bardzo podoba mi się pomysł zmiany kursora, aby wskazać, że przeglądarka działa tak, jak działa, gdy ładuje stronę.

grypa

Answer 24

Zgadzam się częściowo. Przynajmniej w oknach kursor, który się pojawia, jeśli przeglądarka sama ładuje stronę, cursor: progressnie cursor: wait. Korzystanie z tego kursora byłoby znacznie bardziej spójne z doświadczeniem użytkownika przeglądarki. Ale bardzo podoba mi się pomysł zmiany kursora, aby wskazać, że przeglądarka działa tak, jak działa, gdy ładuje stronę.

grypa

Answer 25

2

Najłatwiejszy sposób, jaki znam, to używanie JQuery w następujący sposób:

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

jere_hr
źródło

to może zająć „wieczność”, jeśli masz dużo elementów, zwłaszcza na wolnym komputerze

redbmk

Answer 26

to może zająć „wieczność”, jeśli masz dużo elementów, zwłaszcza na wolnym komputerze

redbmk

Answer 27

1

Wypróbuj CSS:

html.waiting {
cursor: wait;
}

Wygląda na to, że jeśli właściwość bodyjest używana jako dołączona do htmlniej, kursor oczekiwania na całej stronie nie jest wyświetlany. Ponadto, jeśli używasz klasy css, możesz łatwo kontrolować, kiedy faktycznie ją wyświetla.

Zapalony gracz
źródło

Co to za klasa czekania? Czy to coś niestandardowego?

Sebas

Answer 28

Co to za klasa czekania? Czy to coś niestandardowego?

Sebas

Answer 29

Oto bardziej rozbudowane rozwiązanie, które nie wymaga zewnętrznego 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);
}

dzięki temu możesz:

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

Answer 30

Użyłem adaptacji rozwiązania Erica Wendelina . Wyświetli przezroczystą, animowaną nakładkę elementu div na całe ciało, kliknięcie zostanie zablokowane przez element div wait, gdy będzie widoczny:

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 ...

Answer 31

Moje dwa pensy:

Krok 1: Zadeklaruj tablicę. Będzie to używane do przechowywania oryginalnych kursorów, które zostały przypisane:

var vArrOriginalCursors = new Array(2);

Krok 2: Zaimplementuj funkcję 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;
    }
}

Co robi: Pobiera wszystkie elementy na stronie. Przechowuje oryginalne kursory przypisane do nich w tablicy zadeklarowanej w kroku 1. Modyfikuje kursory na żądany kursor przekazany przez parametr CursorType

Krok 3: Przywróć kursory na stronie

 function CursorRestoreEntirePage(){
    let lclCntr = 0;
    var elements = document.body.getElementsByTagName('*');
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        elements[lclCntr].style.cursor = vArrOriginalCursors[lclCntr];
    }
}

Uruchomiłem to w aplikacji i działa dobrze. Jedynym zastrzeżeniem jest to, że nie testowałem go, gdy dynamicznie dodajesz elementy.

Answer 32

1

Aby ustawić kursor z JavaScript dla całego okna, użyj:

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

Z CSS:

html { cursor: wait; }

W razie potrzeby dodaj dalszą logikę.

Peter J. de Bruin
źródło

To rozwiązanie javascript jest najlepsze, działa bez dotykania bagażu HTML. Jest to o wiele lepsze niż przełączanie klas na elementach, co jest bardzo powolne, jeśli masz dużo węzłów w swoim DOM.

Rajshekar Reddy

Answer 33

To rozwiązanie javascript jest najlepsze, działa bez dotykania bagażu HTML. Jest to o wiele lepsze niż przełączanie klas na elementach, co jest bardzo powolne, jeśli masz dużo węzłów w swoim DOM.

Rajshekar Reddy

Answer 34

0

BlockUI jest odpowiedzią na wszystko. Spróbuj.

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

kulNinja
źródło

Answer 35

Ten czysty JavaScript wydaje się działać całkiem nieźle ... przetestowany w przeglądarkach FireFox, Chrome i Edge.

Nie jestem pewien co do wydajności, gdybyś miał nadmiar elementów na swojej stronie i wolny komputer ... spróbuj i zobacz.

Ustaw kursor na czekanie wszystkich elementów:

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

Ustaw kursor dla wszystkich elementów z powrotem na domyślne:

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

Alternatywną (i być może nieco bardziej czytelną) wersją byłoby utworzenie funkcji setCursor w następujący sposób:

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

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

a następnie zadzwoń

setCursor("wait");

i

setCursor("default");

aby ustawić odpowiednio kursor oczekiwania i kursor domyślny.

Poczekaj na kursor na całej stronie html

Odpowiedzi: