Компонент оповещений позволяет, при срабатывании определенных событий, донести до пользователя важную информацию.
Данный компонент спроектирован исключительно для работы через Javascript, однако при большом желании, HTML код оповещения можно сформировать и вручную.
Создание через атрибуты
Для создания оповещения через атрибуты, необходимо добавить инициатору события вызова атрибут data-alert. Опции оповещения можно задать
через атрибуты data-alert-{NAME}.
// Текст оповещения
data-alert-text
// Название оповещения
data-alert-title
// Местоположение появления оповещения
data-alert-placement
// Кол-во миллисекунд, через которое оповещение будет закрыто. По умолчанию 3000 (3 сек.)
data-alert-autoclose
// Будет ли отображен оверлей. Принимает значения true или false. По умолчанию false
data-alert-overlay
Создание через Javascript
Для создания оповещения через javascript, необходимо создать экземпляр класса PipUI.Alert и передать в него один параметр опций. Важнейшим свойством объекта опций является text и title, которые задают текст и название окна соответственно. При желании эти свойства могут быть опущены.
// Выводить в консоль отладку
debug: false
// Текст оповещения
text: ''
// Название оповещения
title: ''
// Местоположение появления оповещения
placement: 'bottom-right'
// Иконка оповещения
icon: ''
// Отображать ли оверлей. Если хоть у одного открытого окна задан данный параметр,
// то оверлей будет отображаться до тех пор, пока такие оповещения открыты
overlay: false
// Автозакрытие оповещения. Если задано 0, то оповещение
// не будет закрываться автоматически
autoclose: 3000
// Отображать ли кнопку закрытия внутри оповещения
closeButton: true
// Можно закрыть при нажатии на само оповещение
closeClick: false
// Класс открытого оповещения
openedClass: 'alert-active'
// Функция обратного вызова при начале открытия оповещения
openCallback: undefined
// Функция обратного вызова при закрытияе открытия оповещения
closeCallback: undefined
// Функция обратного вызова при окончании открытия оповещения
openedCallback: undefined
// Функция обратного вызова при окончании закрытия оповещения
closedCallback: undefined
// Настройки шаблонов
templates: {
// Шаблон окна оповещения
alert: '...'
// Шаблон кнопки закрытия внутри оповещения
close: '<button type="button" class="btn btn-transparent" data-alert-close></button>'
}
Методы
let alert =newPipUI.Alert();alert.getID() // Вернет уникальный идентификатор оповещенияalert.setOptions(object) // Изменить опции оповещения. DOM не будет изменен// до вызова метода alert.update()alert.getOptions() // Получить опции оповещенияalert.update() // Отрендерит окно зановоalert.isOpen() // Открыто ли оповещениеalert.close(callback) // Закрыть оповещение. Дальнейшая работа с ним будет невозможна// Параметр callback является приоритетной функцией обратного// вызова при начале закрытия, если она задана и через опцииalert.open(callback) // Отобразить оповещение// Параметр callback является приоритетной функцией обратного// вызова при начале отображения, если она задана и через опции
События
Дополнительная информация
Положения появления оповещения задаются в формате {VERTICAL}-{HORIZONTAL}
Поддерживаемые положения по вертикали: top, center, bottom
Поддерживаемые положения по горизонтали: left, center, right
