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

Question

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

Answer 1

你可以用CSS和jQuery的一点帮助实现这一目标。使用CSS，您可以创建一个类来更改整个文档上的光标。使用jQuery，您可以添加/删除该CSS类。在封面之下，PrimeFaces使用jQuery作为Ajax魔术，并且您可以针对PrimeFaces标准jQuery ajaxStart和ajaxStop事件以及针对PrimeFaces特定pfAjaxSend和pfAjaxComplete事件执行添加/移除该CSS类的PrimeFaces 4+挂钩。

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运行投票时，您可以看到它。

Answer 2

Primefaces本身并不像它那样。它有一些组件可以让你可视化它的工作时间（AjaxStatus，BlockUI），但它看起来并不像它对光标做任何事情。

你必须直接使用Javascript来做到这一点。这看起来像一个不错的选择。

change cursor to busy while page is loading