PrimeFaces ajax 요청이 진행 중일 때 마우스 커서를 통화 중 모드로 변경

Question

JSF (특히 primefaces)에서 ajax 버튼을 처리 할 때 마우스 커서의 양식을 통화 모드 (예 : 모래 시계)로 변경할 수 있습니까? p : dataTable이 다음 페이지로 이동할 때 데이터를로드하는 동안 커서의 양식을 변경하고 싶습니다. 감사.

Answer 1

당신은 CSS와 jQuery를의 작은 도움으로이 작업을 수행 할 수 있습니다. CSS를 사용하면 전체 문서에서 커서를 변경하는 클래스를 만들 수 있습니다. jQuery를 사용하면 해당 CSS 클래스를 추가/삭제할 수 있습니다. 커버 아래에서, PrimeFaces는 ajax 매직을 위해 jQuery를 사용하고 PrimeFaces < 4 후크를 표준 ​​jQuery ajaxStart 및 ajaxStop 이벤트에, PrimeFaces 4+ 후크 PrimeFaces 특정 pfAjaxSend 및 pfAjaxComplete 이벤트에 대해 CSS 클래스 추가/제거를 수행 할 수 있습니다.

CSS :

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

합니다 (!important이 경우에 style 속성과 강한 CSS 선택기에서 설정 한 스타일을 오버라이드 (override))

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)을 시각화 할 수있게 해주는 몇가지 구성 요소들을 가지고 있지만, 커서를 가지고있는 것처럼 보이지는 않습니다.

직접 자바 스크립트를 사용해야합니다. 이것은 좋은 옵션처럼 보입니다.

change cursor to busy while page is loading