Lobibox — модальные и всплывающие подсказки jQuery

Продвинутый 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. Там же Вы найдете и все опции, а также документацию по методам и коллбекам. Удачи!

2694 просмотров