it-swarm.com.de

Warten Sie mit dem Cursor über die gesamte HTML-Seite

Ist es möglich, den Cursor auf einfache Weise auf die gesamte HTML-Seite auf 'wait' zu setzen? Die Idee ist, dem Benutzer zu zeigen, dass etwas passiert, während ein Ajax-Anruf abgeschlossen wird. Der folgende Code zeigt eine vereinfachte Version dessen, was ich ausprobiert habe, und veranschaulicht auch die Probleme, auf die ich stoße:

  1. wenn für ein Element (# id1) ein Cursor-Style-Set festgelegt ist, wird dieses Element ignoriert (offensichtlich). 
  2. einige Elemente haben einen Standardcursorstil (a) und zeigen den Wartecursor nicht im Hover an 
  3. das body-Element hat abhängig vom Inhalt eine bestimmte Höhe. Wenn die Seite kurz ist, wird der Cursor nicht unter der Fußzeile angezeigt

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

Später bearbeiten ...
Es funktionierte in Firefox und IE mit: 

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>

Das Problem (oder die Funktion dieser Lösung) besteht darin, dass Klicks aufgrund des überlappenden div verhindert werden (danke Kibbee)

Später später bearbeiten ...
Eine einfachere Lösung von Dorward:

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

und dann 

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

Diese Lösung zeigt nur den Wait-Cursor, erlaubt jedoch Klicks.

85
Aleris

Ich verstehe, dass Sie möglicherweise keine Kontrolle darüber haben, aber Sie könnten stattdessen ein Masking-Div verwenden, das den gesamten Körper mit einem Z-Index über 1 abdeckt. Der mittlere Teil des Divs könnte eine Lademeldung enthalten, wenn Sie möchten.

Dann können Sie den Cursor so einstellen, dass er auf das div wartet und sich nicht um Links kümmern muss, da diese sich unter Ihrem maskierenden div befinden. Hier einige CSS-Beispiele für das "masking div":

 Körper {Höhe: 100%; } 
 div # mask {Cursor: wait; z-Index: 999; Höhe: 100%; Breite: 100%; } 
32
Eric Wendelin

Wenn Sie diese leicht modifizierte Version des CSS verwenden, das Sie von Dorward gepostet haben,

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

sie können dann einige wirklich einfache jQuery hinzufügen, um für alle Ajax-Aufrufe zu arbeiten:

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

oder für ältere jQuery-Versionen (vor 1.9):

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

Dies scheint im Firefox zu funktionieren

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

Der Teil * sorgt dafür, dass sich der Cursor nicht ändert, wenn Sie mit der Maus über einen Link fahren. Obwohl Links immer noch anklickbar sind.

11
Kibbee

Ich habe heute stundenlang mit diesem Problem zu kämpfen gehabt. Im Prinzip funktionierte alles gut in FireFox, aber natürlich nicht in IE. In IE zeigte der Wait-Cursor NACH der zeitaufwendigen Funktion wurde ausgeführt.

Ich habe den Trick auf dieser Site gefunden: http://www.codingforums.com/archive/index.php/t-37185.html

Code:

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

Mein Code wird in einer JavaScript-Klasse ausgeführt, daher this und MyClass (MyClass ist ein Singleton).

Ich hatte die gleichen Probleme, als ich versuchte, ein Div anzuzeigen, wie auf dieser Seite beschrieben. In IE wurde angezeigt, nachdem die Funktion ausgeführt wurde. Ich denke, dieser Trick würde auch dieses Problem lösen.

Vielen Dank, dass Sie den Autor des Beitrags glenzgv. Du hast wirklich meinen Tag gemacht !!!

7
pasx

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

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

4
redbmk

Warum verwenden Sie nicht einfach eine dieser fantastischen Grafiken zum Laden (zB: http://ajaxload.info/ )? Der wartende Cursor ist für den Browser selbst. Wenn er also erscheint, hat er etwas mit dem Browser zu tun und nicht mit der Seite.

2
unexist

Die einfachste Art, die ich kenne, ist die Verwendung von JQuery wie folgt:

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

Hier ist eine ausführlichere Lösung, die kein externes CSS erfordert:

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);
}

mit diesem können Sie:

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

Versuchen Sie die CSS:

html.waiting {
cursor: wait;
}

Wenn die Eigenschaft body so verwendet wird, wie sie zu html gehört, wird der Wait-Cursor nicht über die gesamte Seite angezeigt. Wenn Sie eine CSS-Klasse verwenden, können Sie außerdem leicht steuern, wann sie tatsächlich angezeigt wird.

1
GameFreak

Ich habe eine Adaption von Eric Wendelin s Lösung verwendet. Es wird ein transparentes, animiertes Overlay-Wait-Div über den gesamten Körper angezeigt. Der Klick wird durch das Wait-Div blockiert, solange es sichtbar ist:

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

Meine zwei Pence: 

Schritt 1: Deklarieren Sie ein Array. Dies wird zum Speichern der ursprünglichen Cursor verwendet, die zugewiesen wurden:

var vArrOriginalCursors = new Array(2);

Schritt 2: Implementieren Sie die Funktion 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;
    }
}

Was es tut: Ruft alle Elemente auf der Seite ab. Speichert die ihnen zugewiesenen ursprünglichen Cursor in dem in Schritt 1 deklarierten Array. Ändert die Cursor in den gewünschten Cursor, wie vom Parameter CursorType übergeben

Schritt 3: Stellen Sie die Cursor auf der Seite wieder her

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

Ich habe dies in einer Anwendung ausgeführt und es funktioniert einwandfrei ... __ Nur ist zu beachten, dass ich es nicht getestet habe, wenn Sie die Elemente dynamisch hinzufügen.

0
indiaaditya

BlockUI ist die Antwort auf alles. Versuche es.

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

0
kulNinja