web-dev-qa-db-ja.com

htmlページ全体にカーソルを置く

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

  1. 要素（＃id1）にカーソルスタイルが設定されている場合、bodyに設定されているものは無視されます（明らかに）
  2. 一部の要素にはデフォルトのカーソルスタイル（a）があり、ホバー時に待機カーソルが表示されません
  3. 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に感謝）

後で編集...
ドーワードからのよりシンプルなソリューション：

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

その後

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

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

javascripthtmlcssdynamic-css
86
Aleris

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

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

 body {高さ：100％; } 
 div＃mask {cursor：wait; z-index：999;高さ：100％;幅：100％; }
32
Eric Wendelin

Dorwardから投稿したCSSのこのわずかに修正されたバージョンを使用する場合、

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

その後、いくつかの本当に単純な jQuery を追加して、すべてのajax呼び出しで機能するようにできます。

$(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"); });
});
108
Dani

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

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

*部分は、リンクの上にカーソルを置いてもカーソルが変わらないようにします。リンクは引き続きクリック可能ですが。

12
Kibbee

今日、私はこの問題に何時間も苦労しています。基本的に、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してくれてありがとう。あなたは本当に私の一日を作りました!!!

7
pasx

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

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

4
redbmk

なぜそれらの派手なロードグラフィックス（たとえば： http://ajaxload.info/ ）を使用しないのですか？待機カーソルはブラウザ自体のためのものです。したがって、表示されるときはいつでも、ページではなくブラウザと関係があります。

2
unexist

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

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

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

Eric Wendelin のソリューションの適応を使用しました。ボディ全体に透明なアニメーションオーバーレイwait-divが表示されます。クリックは、表示されている間、wait-divによってブロックされます。

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

CSSを試してください：

html.waiting {
cursor: wait;
}

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

1
GameFreak

私の2ペンス：

ステップ1：配列を宣言します。これは、割り当てられた元のカーソルを保存するために使用されます。

var vArrOriginalCursors = new Array(2);

ステップ2：関数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;
    }
}

機能：ページ上のすべての要素を取得します。割り当てられた元のカーソルを手順1で宣言された配列に格納します。カーソルをパラメーターCursorTypeで渡された目的のカーソルに変更します

ステップ3：ページ上のカーソルを復元する

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

これをアプリケーションで実行しましたが、正常に動作します。唯一の注意点は、要素を動的に追加するときにテストしていないことです。

0
indiaaditya

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

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

0
kulNinja