當PrimeFaces ajax請求正在進行時，將鼠標光標更改爲繁忙模式

Question

在JSF（特別是primefaces）中處理ajax按鈕時，可以將鼠標光標的窗體更改爲繁忙模式（例如：沙漏）？我想改變光標的形式，而當我導航到下一頁時，我的p：dataTable正在加載數據。謝謝。

Answer 1

你可以用CSS和jQuery的一點幫助實現這一目標。使用CSS，您可以創建一個類來更改整個文檔上的光標。使用jQuery，您可以添加/刪除該CSS類。在封面之下，PrimeFaces使用jQuery作爲Ajax魔術，並且您可以針對PrimeFaces標準jQuery ajaxStart和ajaxStop事件以及針對PrimeFaces特定pfAjaxSend和pfAjaxComplete事件執行添加/移除該CSS類的PrimeFaces 4+掛鉤。

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