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

Posted 2023-02-22

【中文标题】当 PrimeFaces ajax 请求正在进行时，将鼠标光标更改为忙碌模式

【英文标题】：Change mouse cursor to busy mode when PrimeFaces ajax request is in progress

【发布时间】：2013-03-22 04:39:53

【问题描述】：

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

【参考方案1】：

您可以在 CSS 和 jQuery 的帮助下实现这一点。使用 CSS，您可以创建一个更改整个文档上的光标的类。使用 jQuery，您可以添加/删除该 CSS 类。在幕后，PrimeFaces 使用 jQuery 实现 ajax 魔法，您可以在标准 jQuery ajaxStart 和 ajaxStop 事件上使用 PrimeFaces pfAjaxSend 和 pfAjaxComplete 事件上使用 PrimeFaces 4+ 挂钩来执行添加/删除该 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 进行投票时看到它。

【参考方案2】：

Primefaces 本身看起来并不像它那样做。它有一些组件可以让您在其工作时进行可视化（AjaxStatus、BlockUI），但看起来它对光标没有任何作用。

您必须直接使用 javascript 来执行此操作。这看起来是个不错的选择。

change cursor to busy while page is loading

【讨论】：

我明白了.. 希望它会尽快添加到它的组件中.. 无论如何感谢您的回复:)