Компонент оповещений позволяет, при срабатывании определенных событий, донести до пользователя важную информацию.
HTML + Javascript
<button class="btn" id="alert-example-1">Создать оповещение</button>
<script>
$(function(){
$('body').on('click', '#alert-example-1', function(){
pipui.alert.open('You have a new messages!', 'Alert');
});
});
</script>
В примере выше, показан способ взаимодействия с оповещениями через Javascript.
Если есть необходимость создавать их без использования Javascript, то можно использовать код ниже
HTML
<div class="alert">
<div class="alert-id" data-autoclose="true">
<div class="alert-content">You have a new messages!</div>
<div class="alert-footer">
<div class="block-left">Alert</div>
<div class="block-right"><button class="btn btn-clear close-trigger">ЗАКРЫТЬ</button></div>
</div>
</div>
</div>
Внутри контейнера .alert может содержаться множество оповещений и нет необходимости создавать новый, однако если его положение (placement) отличается от существующих, то стоит добавить новый
Метод pipui.alert.open создает новое оповещение и содержет в себе 4 параметра:
text - Основной текст оповещения. Данный текст выводится в блоке .alert-content;
title - Название оповещения. Данный текст выводится в блоке .alert-footer > .block-left;
placement - Местоположение оповещения на экране. Данный метод можно использовать добавив параметр data-placement="{Y}-{X}" к блоку с классом .alert-id;
autoclose - Автозакрытие оповещения. В качестве значения можно передать число миллисекунд или undefined. По умолчанию или если указано undefined, значение выставляется исходя из значения pipui.alert.openTimeout
complete - Анонимная функция, которая выполнится по окончанию вывода оповещения
Свойство pipui.alert.openTimeout задает время по умолчанию, через которое оповещение исчезнет
Метод pipui.alert.open(text, title, placement, autoclose, complete) создает новое оповещение и выводит его
Метод pipui.alert.close(e, complete) закрывает оповещение с его последующим удалением
Метод pipui.alert.hide(e, complete) закрывает оповещение без его удаления
Метод pipui.alert.show(e, complete) открывает закрытое оповещение