Question

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

Answer 1

你可以通过CSS和jQuery的一点帮助来实现这一点。使用CSS，您可以创建一个更改整个文档上的光标的类。使用jQuery，您可以添加/删除该CSS类。在幕后，PrimeFaces使用jQuery进行ajax魔术，你可以使用PrimeFaces＆lt; 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");
});

对于这种情况，你也在其他地方使用标准的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

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

2 个答案: