javascript - JQuery - 在整个页面(也是 JQuery UI 元素)上显示进度鼠标光标并在之后正确重置

Question

(我的用户主要使用 Chrome 和 Firefox。)

当一个长时间运行的 Action 开始时，我想通过将鼠标光标设置为进度来指示正在进行的操作。我想在所有可见元素上显示此进度 - 主体以及按钮、可拖动元素、可调整大小元素以及任何其他可用的 UI 元素。 当然我也想在之后为所有元素重置鼠标光标。所以我必须知道哪个是每个元素的默认样式(光标指针、可拖动移动、可调整大小...)。

我的方法:

如果我只是为“body”设置进度光标，按钮和可拖动对象的光标仍然是旧的，这会让用户感到困惑:

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

是否有更优雅/通用的方法来做到这一点？另外我不确定我是否忘记将特定的 JQuery 样式重置为其默认值。我想解决我所有页面的这个问题，而不用再考虑它。

---

对于“长时间运行的操作”，我的意思是 $.ajax/$.post 调用。，像这样:

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

Answer 1

请参阅此 fiddle 以了解执行此操作的方法:http://jsfiddle.net/sptDP/

它涉及将一个类添加到您的 body (或任何您想要的地方)，并为其后代添加一个 CSS 通用选择器。您应该对大多数不可避免的后续评论持保留态度，认为通用选择器是多么邪恶 (http://www.kendoui.com/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx)。

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

FWIW - 我倾向于同意来自其他链接线程的一些海报，即加载器 GIF 或其他东西比弄乱光标更好。但最终您会比我们更了解您的应用 :)