ajax - 当 PrimeFaces ajax 请求正在进行时，将鼠标光标更改为忙碌模式

Question

在 JSF(特别是 primefaces)中处理 ajax 按钮时，是否可以将鼠标光标的形式更改为忙碌模式(例如:沙漏)？当我导航到下一页时，我想在我的 p:dataTable 加载数据时更改光标的形式。谢谢。

Answer 1

你可以在 CSS 和 jQuery 的帮助下实现这一点。使用 CSS，您可以创建一个更改整个文档上的光标的类。使用 jQuery，您可以添加/删除该 CSS 类。在幕后，PrimeFaces 使用 jQuery 来实现 ajax 魔法，您可以使用 PrimeFaces <4 hook on standard jQuery ajaxStart和 ajaxStop事件和 PrimeFaces 4+ Hook 特定于 PrimeFaces pfAjaxSend和 pfAjaxComplete执行该 CSS 类的添加/删除的事件。

CSS:

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

( !important 覆盖由 style 属性设置的任何样式，并在这种情况下使用更强的 CSS 选择器)

jQuery 和 PrimeFaces:

$(document).on("ajaxStart pfAjaxSend", function() {
    $("html").addClass("progress");
}).on("ajaxStop pfAjaxComplete", function() {
    $("html").removeClass("progress");
});

对于您还使用标准 JSF <f:ajax> 的情况在其他地方并希望拥有相同的进度指示器，您可以这样做:

jsf.ajax.addOnEvent(function(data) {
    $("html").toggleClass("progress", data.status == "begin");
});

OmniFaces showcase application 也使用了它。 .您可以在 this page 进行投票时看到它。 .