9

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

4

2 回答 2

12

你可以在 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：

$(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 展示应用程序使用。当您在此页面上运行民意调查时，您可以在其中看到它。

于 2013-04-01T20:03:50.450 回答
0

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

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

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

于 2013-04-01T06:56:49.097 回答