📧 jGrowl в AjaxForm: Переопределение стилей сообщений
10.11.2017
10.11.2017
При использовании дополнения AjaxForm для отправки сообщений на почту в MODX Revolution часто возникает потребность стилизовать окна уведомлений и переопределить их стандартное поведение.
Давайте рассмотрим способы реализации подобных задач:
По документации AjaxForm для стилизации jGrowl окон (которые используются для отображения уведомлений) можно указать свои css и js файлы через параметры сниппета AjaxForm, это параметры:
Недостатки этих методов в том, что придется делать копии стандартных файлов, и модефицировать их код. А при обновлении плагина код ajaxform/js/default.js может измениться. Это не критично, но есть вероятность такого события. Что само себе уже не очень приятно.
Можно в своих js-файлах переопредлить нужный метод AjaxForm из файла assets/components/ajaxform/js/default.js. Давайте рассмотрим пример кода, когда для окна успеха нужно задать свойство sticky=true (чтобы окно не пропадало без явного нажатия на кнопку закрытия) и указать класс темы для уведомления, чтобы было удобнее стилизовать внешний вид виджета jGrowl:
// customize AjaxForm
$(document).ready(function(){
AjaxForm.Message.success =
function(message, sticky) {
if (message) {
$.jGrowl(message, {theme: 'taleby-message-success', sticky: true});
}
};
});
И дальше можно легко стилизовать содержимое окна уведомления AjaxForm через селектор родителя div.jGrowl div.jGrowl-notification.taleby-message-success.
И активировать любое из доступных свойст компоненты jGrowl.
Смотрите так же