3

（我的用户主要使用 Chrome 和 Firefox。）

当一个长时间运行的动作开始时，我想通过将鼠标光标设置为进度来指示正在执行某些操作。我想在所有可见元素上显示此进度 - 主体以及按钮、可拖动、可调整大小以及任何其他可用的 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);
});
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 回答