Bekle tüm html sayfası üzerinde imleç

SORU

10 EKİM 2008, Cuma

Bekle tüm html sayfası üzerinde imleç

İmleç ayarlamak mümkün '' basit bir şekilde tüm html sayfası? bekleyin. Fikri bir şey bir ajax çağrısı tamamlanırken oluyor kullanıcı göstermektir. Aşağıdaki kodu denedim bu basitleştirilmiş bir sürümünü gösterir ve de karşılaştım sorunlar göstermek:

eğer bir öğe (#ıd1) imleç bir stil varsa bir beden üzerinde ayarlayın (tabii ki) göz ardı eder
bazı öğeler varsayılan imleç stili (a) ve bekleme üzerine gelindiğinde imleç göstermez
body öğesi belli bir yükseklik içeriğine bağlı olarak ve eğer sayfa kısa ise, imleç altbilgi aşağıda göstermez

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>

Daha sonra Düzenle...< / ^ br . Firefox işe yaradı ve 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>

(Ya da özellik) bu problemin çözümü ile çakışan dıv (teşekkürler Kibbee) çünkü tıklama önleyecektir

Daha sonra Düzenle sonra...< / ^ br . Dorward, daha basit bir çözüm:

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

ve sonra

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

Bu çözüm sadece bekleme imleç ama tıklama sağlar gösterir.

CEVAP

29 Mayıs 2012, Salı

Eğer Dorward dan yayınlanan CSS biraz değiştirilmiş bu sürümünü kullanıyorsanız,

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

sonra bazı çok basit jQuery ajax aramalar için çalışmak ekleyebilirsiniz:

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

Bunu Paylaş: