javascript - HTMLページ全体でカーソルを待機

Question

簡単な方法でhtmlページ全体でカーソルを「待機」に設定することは可能ですか? アイデアは、ajax 呼び出しが完了している間に何かが起こっていることをユーザーに示すことです。以下のコードは、私が試したものの簡略化されたバージョンを示しており、私が遭遇した問題も示しています。

要素（#id1）にカーソルスタイルが設定されている場合、本体に設定されているものは無視されます（明らかに）
一部の要素にはデフォルトのカーソルスタイル (a) があり、ホバー時に待機カーソルが表示されません。
body 要素はコンテンツに応じて特定の高さを持ち、ページが短い場合、カーソルはフッターの下に表示されません

テスト:

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

後で編集...
Firefoxと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>

このソリューションでは、待機カーソルのみが表示されますが、クリックは許可されます。

score 113 · Accepted Answer

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

score 35 · Accepted Answer

これを制御できない可能性があることは理解していますが、代わりに、1 より大きい z-index でボディ全体をカバーする「マスキング」div を使用することもできます。必要に応じて、div の中央部分に読み込みメッセージを含めることができます。

次に、div で待機するようにカーソルを設定できます。リンクはマスキング div の「下」にあるため、リンクについて心配する必要はありません。「マスキング div」の CSS の例を次に示します。

体 { 高さ: 100%; }
div#mask { カーソル: 待機; Z インデックス: 999; 高さ: 100%; 幅: 100%; }

score 12 · Accepted Answer

これはFirefoxで動作するようです

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

*の部分は、リンクにカーソルを合わせたときにカーソルが変更されないようにします。リンクは引き続きクリック可能ですが。

score 7 · Accepted Answer

私は今日、この問題に何時間も苦労しています。基本的に、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 では、関数が実行された後に表示されていました。だから、このトリックはその問題も解決すると思います。

投稿の著者である glenngv に多大な時間を割いてくれたことに感謝します。あなたは本当に私の一日を作りました!!!

score 4 · Accepted Answer

4

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

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

于 2012-10-19T01:26:19.673 に答える

score 3 · Accepted Answer

私が知っている最も簡単な方法は、次のように JQuery を使用することです。

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

score 2 · Accepted Answer

ファンシーな読み込みグラフィック (例: http://ajaxload.info/ )を使用しないのはなぜですか? 待機中のカーソルはブラウザ自体のためのものです。したがって、それが表示されるときはいつでも、ページではなくブラウザと関係があります。

score 1 · Accepted Answer

css を試してください:

html.waiting {
cursor: wait;
}

プロパティbodyが並置されている場合、htmlページ全体に待機カーソルが表示されないようです。さらに、css クラスを使用すると、実際にいつ表示されるかを簡単に制御できます。

score 1 · Accepted Answer

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

score 0 · Accepted Answer

0

BlockUI はすべての答えです。試してみる。

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

于 2013-09-10T17:11:19.710 に答える

javascript - HTMLページ全体でカーソルを待機

14 に答える 14

Related

Reference