Продвинутый jQuery плагин для создания всплывающих подсказок. Один из лучших современных инструментов для быстрой реализации месседж-боксов и красивых оповещений.
Плагин jQuery Lobibox очень просто в использовании, но в то же время, имеет огромное количество функций, вариантов использования и весьма дружелюбен к расширению. Основное предназначение сего плагина — отображение на сайте блоков с текстом и анимированных оповещений
Что умеет плагин всплывающих подсказок на jQuery
Относительно месседж-боксов:
- Окна могут быть модальными не модальными;
- Возможность показа несколько сообщений;
- Использовать любой доступный класс анимации для отображения и скрытия сообщения диалогового окна;
- Каждое сообщение можно перетаскивать
- Каждое сообщение — это экземпляр плагина. Вы можете легко взять экземпляр и использовать события или вызывать методы непосредственно на экземпляре;
- Дополнительные особенности:
- разные цвета и иконки;
- подтверждать\отклонять сообщения;
- любой объем текста;
- прогресс-бары.
Относительно оповещений:
- Поддержка различных цветов;
- Возможность показа в любх углах экрана;
- Задержка при появлении;
- Задержка с индикатором;
- Показывать изображения;
- Поддержка звука;
- Поддержка размера. Вы можете отображать уведомления разного размера.
Всплывающие подсказки jQuery — использование
HTML-разметка со всеми подключенными файлами будет выглядеть следующим образом:
<!DOCTYPE html>
<html>
<head>
<!--Include this css file in the <head> tag -->
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="dist/css/Lobibox.min.css"/>
</head>
<body>
...
<!--Include these script files in the <head> or <body> tag-->
<script src="lib/jquery.1.11.min.js"></script>
<script src="dist/js/Lobibox.min.js"></script>
<!-- If you do not need both (messageboxes and notifications) you can inclue only one of them -->
<!-- <script src="dist/js/messageboxes.min.js"></script> -->
<!-- <script src="dist/js/notifications.min.js"></script> -->
</body>
</html>
Чтобы отобразить модальное окно, Вам достаточно вызвать следующий код при любым необходимом событии:
Lobibox.confirm({
msg: "Are you sure you want to delete this user?",
});
Для создания оповещения код будет выглядеть следующим образом:
Lobibox.notify('default', {
msg: 'Lorem ipsum dolor sit amet hears farmer indemnity inherent.'
});
Это самые элементарные примеры, которые будут полноценном работать у Вас, если сделать все правильно.
Автор трудолюбиво создал исчерпывающий мануал по своему плагину с приведением всевозможных вариантов использования. Все это можно посмотреть на странице демонстрации плагина всплывающих подсказок jQuery. Там же Вы найдете и все опции, а также документацию по методам и коллбекам. Удачи!
