Tiny Push (jQuery plugin)
Легкий jquery плагин для создания уведомлений на сайте в стиле macOS
Установка
Bower
bower install tinypush-js
NPM
npm install tinypush-js
Подключение
Подключите файлы tinypush.js и tinypush.css в свой проект.
PUG
link(rel='stylesheet', href='./PATH/TO/tinypush.css')
script(src='./PATH/TO/tinypush.js')
HTML
<link rel="stylesheet" href="./PATH/TO/tinypush.css">
<script src="./PATH/TO/tinypush.js"></script>
Разместите стандартный код верстки в начале или конце страницы.
<div class="tinypush__notifications js-tinypush-container">
<div class="tinypush__message tinypush__message--example js-tinypush-example">
<div class="tinypush__container-img"><img class="tinypush__message-img js-tinypush-img" src="./img/imessage.png"/></div>
<div class="tinypush__container-message">
<h5 class="tinypush__message-title js-tinypush-title">title</h5><small class="tinypush__message-text js-tinypush-text">text</small>
</div>
<div class="tinypush__container-buttons js-tinypush-buttons">
<button class="tinypush__message-button js-tinypush-button">button</button>
</div>
</div>
</div>
или подключите pug файл include ./src/pages/tinypush
Иницилизация и данные
Для подключения плагина обратитесь к элементу
// Указываем ссылку на контейнер в верстке
let $tinupushContainer = $('.js-tinypush-container');
// Опции для сообщения
let tinypushOptions = {
// Ссылка на иконку
icon: "./img/imessage.png",
// Заголовок сообщения
title: "Bob",
// Текст сообщения
text: "I love you, Piter!",
// Список кнопок для обработки событий, может быть пустым
buttons: [{
// Текст кнопки
text: "Ответить",
// Событие при нажатии
// obj - обхект самой кнопки
// tinypushMessage - класс сообщения с данными
event: function (obj, tinypushMessage) {
console.log(tinypushMessage.title);
}
},
{
text: "Удалить",
event: function (obj, tinypushMessage) {
tinypushMessage.destroy();
}
}
],
// Время, через которое скрыть сообщение
timeout: 10000
}
// Иницилизация плагина с параметрами
let $tinypushMessage = $tinupushContainer.tinypush(tinypushOptions);
// Выводим сообщение
$tinypushMessage.push();