3

(私のユーザーは主に Chrome と Firefox を使用しています。)

長時間実行されるアクションが開始されたら、マウス カーソルを進行状態に設定して、何かが進行中であることを示したいと思います。この進行状況をすべての表示可能な要素 (本体、ボタン、ドラッグ可能要素、サイズ変更可能要素、およびその他の UI 要素が利用可能なもの) に表示したいと考えています。もちろん、後ですべての要素のマウスカーソルをリセットしたいです。したがって、各要素のデフォルト スタイル (カーソル ポインター、ドラッグ可能移動、サイズ変更可能...) を知る必要があります。

私のアプローチ：

「本体」にプログレス カーソルを設定しただけでは、ボタンとドラッグ可能なカーソルは古いカーソルのままで、ユーザーを混乱させる可能性があります。

$("body").css("cursor", "progress");

// do long running stuff

$("body").css("cursor", "default");

すべての要素にカーソルを設定すると、別の問題が発生します。どの要素にどのカーソルがあったかわからないからです。したがって、ボタン、ドラッグ可能なもの、サイズ変更可能なものなどは、後でカーソルを失います。

$("*").css("cursor", "progress");

// do long running stuff

$("*").css("cursor", "default");

私が見つけた唯一の実用的なアプローチは次のとおりです。

$("body").css("cursor", "progress");
$("button").css("cursor", "progress");
$(".ui-dialog-titlebar").css("cursor", "progress");
$(".ui-resizable-n").css("cursor", "progress");
$(".ui-resizable-s").css("cursor", "progress");
$(".ui-resizable-w").css("cursor", "progress");
$(".ui-resizable-e").css("cursor", "progress");

// do long running stuff

$("body").css("cursor", "default");
$("button").css("cursor", "pointer");
$(".ui-dialog-titlebar").css("cursor", "move");
$(".ui-resizable-n").css("cursor", "n-resize");
$(".ui-resizable-s").css("cursor", "s-resize");
$(".ui-resizable-w").css("cursor", "w-resize");
$(".ui-resizable-e").css("cursor", "e-resize");

Is there a more elegant / generic approach to do that? Also I'm not sure if I forget to reset a particular JQuery style to its default. I would like to solve this problem for all my pages without thinking about it again.

With "long running action" I mean $.ajax / $.post calls., like this:

// my new magic mouse cursor method which should do what I want
showProgressCursor(true);

$.post(window.location.href, {action: 'reprovide'}, function(data) {
    // should reset all cursor CSS to their correct defaults
    showProgressCursor(false);
});
4

1 に答える 1

2

これを行う方法については、このフィドルを参照してください: http://jsfiddle.net/sptDP/

これには、本体 (または必要な場所) にク​​ラスを追加し、その子孫用の CSS ユニバーサル セレクターを組み合わせる必要があります。そして、ユニバーサル セレクターがいかに邪悪であるかについての避けられないその後のコメントのほとんどを理解する必要があります ( http://www.kendoui.c​​om/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx )。

body.loading, body.loading * {
    cursor:progress !important;
}

FWIW - 他のリンクされたスレッドからのいくつかのポスターに同意する傾向があります.ローダーGIFまたは何かがカーソルをいじるよりも優れています. しかし、最終的にはあなたのアプリを私たちよりもよく知っているでしょう :)

于 2013-06-04T21:12:46.667 に答える