更改鼠标光标移动到繁忙的模式，当PrimeFaces Ajax请求正在进行 [英] Change mouse cursor to busy mode when PrimeFaces ajax request is in progress

问题描述

就可以鼠标光标的形式转变成繁忙的模式（例如：沙漏）的JSF（特别primefaces）加工时，AJAX按钮？我想改变我的光标的形式，而我的号码：dataTable中加载数据，当我浏览到下一个页面。谢谢你。

it is possible to change the mouse cursor's form into busy mode (for example: hourglass) when processing ajax button in JSF (specifically primefaces)? I want to change my cursor's form while my p:dataTable is loading data when i navigate it to the next page. Thanks.

推荐答案

您可以使用CSS和jQuery的一点帮助实现这一目标。使用CSS，你可以创建可改变对整个文档光标类。使用jQuery，您可以添加/删除CSS类。在幕后，PrimeFaces用jQuery进行Ajax的魔力，你可以为PrimeFaces 4;钩上标准的jQuery ajaxStart 和 ajaxStop 事件和PrimeFaces 4+具体的PrimeFaces钩 pfAjaxSend 和 pfAjaxComplete 事件执行的添加/删除那CSS类。

You can achieve this with a little help of CSS and jQuery. With CSS, you can create a class which changes the cursor on the entire document. With jQuery, you can add/remove that CSS class. Under the covers, PrimeFaces uses jQuery for the ajax magic and you can for PrimeFaces <4 hook on standard jQuery ajaxStart and ajaxStop events and for PrimeFaces 4+ hook on PrimeFaces specific pfAjaxSend and pfAjaxComplete events to perform the add/remove of that CSS class.

CSS：

html.progress, html.progress * {
    cursor: progress !important;
}

（即！重要覆盖的情况下，任何的风格深受设置样式属性和更强的CSS选择器这一点）的

(the !important overrides any style set by style attribute and stronger CSS selectors for the case that)

jQuery和PrimeFaces：

jQuery and PrimeFaces:

$(document).on("ajaxStart pfAjaxSend", function() {
    $("html").addClass("progress");
}).on("ajaxStop pfAjaxComplete", function() {
    $("html").removeClass("progress");
});

有关您还使用标准的JSF的情况下＆LT; F：AJAX＆GT; 其他地方，并希望有同样的进度指示器，这里是你如何能做到这一点：

For the case you're also using standard JSF <f:ajax> elsewhere and would like to have the same progress indicator, here's how you can do that:

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

这也被 OmniFaces展示应用程序。你可以看到它在其他在运行投票表决此页面。

This is also used by OmniFaces showcase application. You can see it among others when you run the poll at this page.

这篇关于更改鼠标光标移动到繁忙的模式，当PrimeFaces Ajax请求正在进行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！