PNotify - настраиваемый плагин для уведомлений
Для некоторых из нас, кто постоянно занят, уведомления держат нас в курсе всех важных событий, новостей и информации. Это сокращает время ожидания при одновременном обновлении информации о последних событиях, и неудивительно, что мы получаем уведомления как на настольных компьютерах, так и на мобильных устройствах..
Однако, если вы хотите создать уведомление для своего сайта, вы можете легко создать его с помощью этого плагина под названием PNotify. Это бесплатный плагин с открытым исходным кодом javascript с большим количеством опций и простой в использовании. С PNotify вы можете даже показать до 1000 уведомлений одновременно (см. Этот тест для сравнения). Как это круто?
Зачем использовать PNotify?
PNotify, ранее известная как Pines Notify, содержит три основных типа уведомлений: Информация, уведомление а также ошибка. Он имеет множество функций, эффектов, тем, а также стилей. Вы можете выбрать различные стили из Bootstrap, jQuery UI, Font Awesome или использовать свой собственный стиль. Есть также около 18 готовых тем (созданных с помощью Bootswatch), которые вы можете выбрать, и даже есть эффекты перехода.
Отличительной особенностью PNotify является то, что он не только обладает потрясающими графическими функциями, но и обогащен мощными и богатыми API (или модулями). Эти API-интерфейсы включают в себя уведомления на рабочем столе (на основе стандарта черновика веб-уведомлений), поддержку динамического обновления, обратные вызовы для различных событий, средство просмотра истории для просмотра предыдущих уведомлений и поддержку HTML в заголовке и теле..
PNotify обеспечивает ненавязчивое уведомление Это означает, что вы можете щелкнуть любой элемент позади уведомления, не отклоняя его. Вы также можете определить, где будет отображаться уведомление, с помощью функций стеков, что позволяет размещать уведомление везде: в стиле верхней / нижней панели или даже в виде всплывающей подсказки..
Основное использование
Исходники PNotify поставляются в настраиваемых пакетных модулях и доступны здесь..
Начиная
После того, как вы получили источники, включите их в свой HTML следующим образом:
PNotify очень прост в использовании. Вот простое уведомление:
$ (function () new PNotify (title: 'Simple Notification', текст: 'Эй, я простое уведомление.'););
И вот результат:
По сути, для создания уведомления вы инициируете новую функцию PNotify. Заголовок, текст, стиль и другие параметры могут быть переданы внутри функции. Если вы не укажете тип уведомления, он будет использовать тип по умолчанию, который уведомление. Есть около 20+ настраиваемых опций ты можешь пройти. Чтобы увидеть список со значением по умолчанию, нажмите здесь.
стайлинг
Чтобы изменить стиль, вы можете передать моделирование опцию в уведомлении и определим желаемый стиль. Доступные стили bootstrap2, bootstrap3, jqueryui а также fontawesome. Не забудь включить связанные источники стиля в вашем проекте.
Например, если я хочу изменить предыдущий стиль уведомления на тему пользовательского интерфейса jQuery, я использую следующий фрагмент:
новый PNotify (title: "JQuery UI Style", текст: "Привет, я стилизован под тему jQuery UI.", styling: "jqueryui");
Есть еще один способ стилизовать ваше уведомление с помощью этого кода:
PNotify.prototype.options.styling = "jqueryui";
+ Изменить jqueryui со стилем, который вы хотите, затем поместите эту строку перед уведомлением следующим образом:
PNotify.prototype.options.styling = "jqueryui"; новый PNotify (title: "JQuery UI Style", текст: "Привет, я оформлен в стиле jQuery UI.");
Вот ваш результат в стиле:
Добавление модулей
Модули - это богатые API, которые обеспечивают расширенные функции уведомлений. Есть 7 модулей в PNotify: рабочий стол, кнопки, неблокирование, подтверждение, история, обратные вызовы и справочный модуль. Модули можно использовать, передав их соответствующие параметры в уведомление.
В качестве примера ниже приведены коды, показывающие, как использовать модуль Desktop:
PNotify.desktop.permission (); новый PNotify (название: «Уведомление на рабочем столе», текст: «Я уведомляю на рабочем столе. Вы должны дать мне разрешение, чтобы я мог выглядеть как то, что я есть. Если нет, я стану обычным уведомлением». ', рабочий стол: рабочий стол: правда, значок: ноль);
PNotify.desktop.permission (); используется, чтобы убедиться, что пользователи имеют дано разрешение для сайта, чтобы показать уведомление. Если пользователи запрещают сайт, уведомление будет показывается как обычное уведомление вместо.
Как видите, есть дополнительная опция добавления рабочий стол к коду. рабочий стол: есть включит уведомление для рабочего стола; если вы установите значение false, уведомление станет обычным уведомлением..
Вы также можете использовать пользовательский значок через значок вариант. Заполните его с вашим URL-адресом значка; Вы можете установить это ложный отключить значок. Если вы установите его с ноль, будет использоваться значок по умолчанию.
Чтобы увидеть другие реализации модуля с их параметрами, перейдите по этой ссылке.
Вы можете продолжить реализацию, перейдя на его официальный сайт. Там вы можете увидеть некоторые расширенные возможности использования вместе с демонстрациями. Кроме того, вы можете посетить его страницу GitHub для получения дополнительной информации.
