📧 jGrowl в AjaxForm: Переопределение стилей сообщений

10.11.2017

При использовании дополнения AjaxForm для отправки сообщений на почту в MODX Revolution часто возникает потребность стилизовать окна уведомлений и переопределить их стандартное поведение.

Давайте рассмотрим способы реализации подобных задач:

  1. стандартный по документации
  2. и быстрый - через переопределение стандартного метода

Cтандартный метод по переопределению стилей уведомлений AjaxForm

По документации AjaxForm для стилизации jGrowl окон (которые используются для отображения уведомлений) можно указать свои css и js файлы через параметры сниппета AjaxForm, это параметры:

  • frontend_css (по умолчанию файл лежит по пути assets/components/ajaxform/css/default.css)
  • frontend_js (по умолчанию файл лежит по пути assets/components/ajaxform/js/default.js)

 

Недостатки этих методов в том, что придется делать копии стандартных файлов, и модефицировать их код. А при обновлении плагина код ajaxform/js/default.js может измениться. Это не критично, но есть вероятность такого события. Что само себе уже не очень приятно.

Более практичный метод стилизации jGrowl уведомлений AjaxForm в MODX

Можно в своих 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.