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

Question

在 JSF（特别是 PrimeFaces）中处理ajax按钮时，可以将鼠标指针的形状更改为繁忙模式（例如：沙漏）。我想在导航到下一页并加载数据时更改鼠标指针的形状。谢谢。

- David

Answer 1

您可以借助CSS和jQuery轻松实现此目标。使用CSS，您可以创建一个类，用于在整个文档中更改光标。使用jQuery，您可以添加/删除该CSS类。在底层，PrimeFaces使用jQuery进行ajax魔法，您可以在PrimeFaces<4上挂钩标准jQueryajaxStart和ajaxStop事件，并在PrimeFaces 4+上挂钩PrimeFaces特定的pfAjaxSend和pfAjaxComplete事件来执行添加/删除该CSS类。

CSS：

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

（！important可以覆盖style属性设置和更强的CSS选择器，适用于jQuery和PrimeFaces的情况）

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

- BalusC

---

我不相信底部给出的第二个链接仍然能够正确地工作。它是否已经被移动了？ - ConfusedUbuntist

是的，它已经转移到标准JSF中，以<h:commandScript>的形式。我会清理链接。 - BalusC

Answer 2

BalusC一如既往地提供了出色的答案。如果您正在使用PrimeFaces p:ajaxStatus组件，您可以简单地将JavaScript代码嵌入其中，以添加和移除progress类，例如：

<p:ajaxStatus ...
              onstart="$('html').addClass('progress')"
              oncomplete="$('html').removeClass('progress')">
    ...
</p:ajaxStatus>

这需要您添加以下CSS：

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

如果您不知道应该将CSS（或JavaScript）放在哪里，请参考如何在Facelets模板中引用CSS / JS / 图像资源？

- Jasper de Vries

Answer 3

Primefaces本身看起来并不像它会这样做。它有一些组件可以让您在工作时进行可视化（AjaxStatus、BlockUI），但它似乎没有任何与光标相关的操作。

您必须直接使用Javascript来完成这个功能。这看起来是一个不错的选择。

在页面加载时将光标更改为繁忙状态

- EdH

---

我明白了。希望它能尽快添加到组件中。无论如何，感谢您的回复 :) - David