Измените курсор мыши на режим занятости, когда выполняется запрос ajax в PrimeFaces.

Question

Можно изменить форму курсора мыши в режим занятости (например: песочные часы) при обработке кнопки ajax в JSF (в частности, в виде простых поверхностей)? Я хочу изменить форму своего курсора, пока моя p: dataTable загружает данные, когда я перехожу к следующей странице. Благодарю.

Answer 1

Вы можете добиться этого с небольшой помощью CSS и JQuery. С помощью CSS вы можете создать класс, который изменяет курсор на весь документ. С помощью jQuery вы можете добавить/удалить этот класс CSS. Под обложками PrimeFaces использует jQuery для магии ajax, и вы можете использовать для PrimeFaces < 4 привязки к стандартным событиям jQuery ajaxStart и ajaxStop и для PrimeFaces 4+ для особых событий PrimeFaces pfAjaxSend и pfAjaxComplete для выполнения добавления/удаления этого класса CSS.

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> в другом месте и w ульд хотели бы иметь один и тот же индикатор прогресса, вот как вы можете сделать это:

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

Это также используется OmniFaces showcase application. Вы можете видеть это среди других, когда вы запускаете опрос на this page.

Answer 2

Поверхности сами по себе не похожи на это. В нем есть некоторые компоненты, которые позволяют вам визуализировать, когда он работает (AjaxStatus, BlockUI), но он не похож на что-либо с курсором.

Вам нужно будет использовать Javascript для этого. Это похоже на хороший вариант.

change cursor to busy while page is loading