Блок оповещений - стилизованный блок для привлечения внимания пользователей.
<divclass="alertblock"> <divclass="alertblock-wrapper"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur dicta dignissimos doloremque, facere illo ipsa molestias provident quasi quis, quos rem. Ab, expedita hic magni quidem quisquam reprehenderit suscipit? </div></div>
Вы можете выставить дополнительный контент до и/или после основного текста, который будет гармонировать с основным блоком. Для этого добавьте внутрь .alertblock блоки .before и .after соответственно
<divclass="alertblock"> <divclass="before"><iclass="fa fa-exclamation-triangle"></i></div> <divclass="alertblock-wrapper"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur dicta dignissimos doloremque, facere illo ipsa molestias provident quasi quis, quos rem. Ab, expedita hic magni quidem quisquam reprehenderit suscipit? </div> <divclass="after"><iclass="fa-regular fa-face-smile-wink"></i></div></div>
Javascript
Управлять блоками можно с помощью Javascript. Для этого необходимо инициализировать соответствующий объект.
let alertblock =newPipUI.Alertblock('#alertblock')
Класс PipUI.Alertblock принимает 3 аргумента:
1. Элемент (String|HTMLElement)
2. Опции(Object)
3. Метод инициализации(Boolean) - true для создания блока
Создание блока
Вы можете полностью создать блок со всем содержимым. Чтобы это сделать, передайте в 3 параметре значение true и задайте опции во 2 параметре.
Пустой элемент из первого параметра должен существовать на странице
Если вы уже создали блок, то вы можете его инициализировать и управлять им. Для этого просто создайте новый объект с первым параметром
let init =newPipUI.Alertblock('#alertblock');
Опции
Второй параметр объекта PipUI.Alertblock поддерживает следующие параметры
// Выводить в консоль отладку
debug: false
// Шаблон враппера
wrapperTemplate: '<div class="alertblock-wrapper"></div>'
// Шаблон кнопки закрытия
closeTemplate: '<a href="#" class="alertblock-close" rel="nofollow">×</a>'
// Содержимое выводимое до основного контента
before: ''
// Содержимое выводимое после основного контента
after: ''
// Набор классов через пробел, которые будут добавлены к блоку .alertblock
class: ''
// Функция обратного вызова при начале закрытия блока
closeCallback: undefined
// Функция обратного вызова при окончании закрытия блока
closedCallback: undefined
// Функция обратного вызова при начале появления блока
showCallback: undefined
// Функция обратного вызова при окончании появления блока
showedCallback: undefined
// Функция обратного вызова при начале исчезания блока
hideCallback: undefined
// Функция обратного вызова при окончании исчезания блока
hidedCallback: undefined
// Класс анимации скрытого блока
hiddenClass: 'alertblock-hidden'
// Класс анимации закрытого блока
closedClass: 'alertblock-closed'
// Класс полного скрытия блока (display: none)
noneClass: 'alertblock-none'
// Может ли блок быть закртываемым(будет отображаться кнопка закрытия)
canClose: false
// Основное сообщение, выводимое в блоке. Можно использовать HTML
message: ''
Методы
let alertblock =newPipUI.Alertblock('#alertblock');alertblock.getID() // Вернет уникальный идентификатор блокаalertblock.setOptions(object) // Изменить опции блока. DOM не будет изменен// до вызова метода alertblock.update()alertblock.getOptions() // Получить опции блокаalertblock.setMessage(string) // Изменить текст основного содержимогоalertblock.hide(callback) // Скрыть блок.// Параметр callback является приоритетной функцией обратного// вызова при завершении скрытия, если она задана и через опцииalertblock.show(callback) // Показать блок// Параметр callback является приоритетной функцией обратного// вызова при завершении отображения, если она задана и через опцииalertblock.close(callback) // Закрыть блок. Он будет полностью удалён со страницы// Параметр callback является приоритетной функцией обратного// вызова при завершении закрытия, если она задана и через опции
