更改鼠标光标移动到繁忙的模式,当PrimeFaces Ajax请求正在进行鼠标、光标、正在进行、繁忙

2023-09-10 19:14:51 作者:他的轮廓

就可以鼠标光标的形式转变成繁忙的模式(例如:沙漏)的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.

 
精彩推荐
图片推荐