Zmienić kursor myszy na tryb zajętości, gdy żądanie ajaxowania PrimeFaces jest w toku.

Question

jest możliwa zmiana formy kursora myszy w tryb zajęty (na przykład: klepsydra) podczas przetwarzania przycisku ajax w JSF (konkretnie na podstawach)? Chcę zmienić formularz mojego kursora, podczas gdy moja p: dataTable ładuje dane, gdy przechodzę do następnej strony. Dzięki.

Answer 1

Można to osiągnąć z niewielką pomocą CSS i jQuery. Za pomocą CSS możesz utworzyć klasę, która zmienia kursor na całym dokumencie. Za pomocą jQuery możesz dodać/usunąć tę klasę CSS. Pod osłonami, PrimeFaces używa jQuery do magii ajaxowej i możesz na PrimeFaces < 4 hakować na standardowych jQuery ajaxStart i ajaxStop zdarzeń i dla PrimeFaces 4+ haczyka na specyficznych dla PrimeFaces pfAjaxSend i pfAjaxComplete zdarzeń, aby wykonać dodawanie/usuwanie tej klasy CSS.

CSS:

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

(!important zastępuje dowolny styl ustawiony przez style atrybutów i silniejszy CSS selektorów dla przypadku tego)

jQuery i PrimeFaces:

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

Dla w przypadku, gdy używasz standardowego JSF <f:ajax> gdzie indziej, w ould chciałby mieć ten sam wskaźnik postępu, oto jak można to zrobić:

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

ten jest również wykorzystywany przez OmniFaces showcase application. Możesz to zobaczyć między innymi po uruchomieniu ankiety pod numerem this page.

Answer 2

Primefaces sam w sobie nie wygląda tak, jak to robi. Ma pewne komponenty, które umożliwiają wizualizację działania (AjaxStatus, BlockUI), ale nie wygląda na to, że robi cokolwiek z kursorem.

Aby to zrobić, musisz bezpośrednio użyć Javascript. To wygląda na fajną opcję.

change cursor to busy while page is loading