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

Question

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

Answer 1

你可以通过CSS和jQuery的一点帮助来实现这一点.使用CSS,您可以创建一个更改整个文档上的光标的类.使用jQuery,您可以添加/删除该CSS类.在封面下,PrimeFaces使用jQuery作为ajax魔法,你可以使用PrimeFaces <4挂钩标准jQuery ajaxStart和ajaxStop事件,以及PrimeFaces 4+钩子上的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");
});

对于这种情况,你也在<f:ajax>其他地方使用标准的JSF,并希望有相同的进度指示器,这里是你如何做到这一点:

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

这也是OmniFaces展示应用程序使用的.在此页面上运行投票时,您可以看到它.