PNotify - um plugin de notificação altamente personalizável

Para alguns de nós que estão constantemente ocupados, as notificações nos mantêm no topo de todos os eventos, notícias e informações importantes. Diminui o tempo de espera e consegue nos atualizar com os últimos acontecimentos, e não é de admirar que recebamos notificações em desktops e celulares da mesma forma.

Se, no entanto, você quiser criar uma notificação para o seu site, você pode criá-lo facilmente com este plugin chamado PNotify. É um plugin javascript gratuito e de código aberto com muitas opções e é fácil de usar. Com o PNotify, você pode até exibir até 1000 notificações de uma só vez (veja este teste de benchmarking para testá-lo). Quão legal é isso?

Por que usar o PNotify?

PNotify, anteriormente conhecido como Pines Notify, transporta três tipos principais de notificação: info, aviso prévio e erro. Tem um monte de recursos, efeitos, temas e também estilos. Você pode escolher estilos diferentes de Bootstrap, jQuery UI, Font Awesome ou ir com seu próprio estilo. Há também cerca de 18 temas prontos (feitos com o Bootswatch) que você pode escolher e existem até efeitos de transição.

A melhor coisa sobre o PNotify é que ele não tem apenas recursos gráficos impressionantes, mas também é enriquecido com APIs (ou módulos) poderosas e ricas. Essas APIs incluem notificações da área de trabalho (com base no padrão Rascunho de notificações da Web), suporte de atualização dinâmica, retornos de chamada para vários eventos, visualizador de histórico para ver notificações anteriores e suporte a HTML no título e no corpo.

PNotify fornece um notificação discreta o que significa que você pode clicar em qualquer elemento por trás do aviso sem descartá-lo. Você também pode determinar onde a notificação é exibida com os recursos do Stacks, o que permite posicionar o aviso em todos os lugares: como estilo de barra superior / inferior ou até mesmo como uma dica de ferramenta.

Uso Básico

As fontes do PNotify vêm em módulos de pacotes personalizáveis e estão disponíveis aqui.

Começando

Depois de obter as fontes, inclua-as no seu HTML da seguinte forma:

PNotify é muito fácil de usar. Aqui está uma notificação simples:

 $ (function () novo PNotify (title: 'Simple Notification', texto: 'Ei, sou uma simples notificação.'););

E esse é o resultado:

Basicamente, para criar uma notificação, você inicia uma nova função PNotify. O título, texto, estilo e outras opções podem ser passados dentro da função. Se você não especificar o tipo de notificação, ele usará o tipo padrão, que é um aviso prévio. Há cerca de 20+ opções configuráveis você pode passar. Para ver a lista com seu valor padrão, clique aqui.

Styling

Para mudar o estilo, você pode passar o estilo opção na notificação e definir seu estilo desejado. Estilos disponíveis são bootstrap2, bootstrap3, jqueryui e fontawesome. Não se esqueça de incluir fontes de estilo relacionadas dentro do seu projeto.

Por exemplo, se eu quiser alterar o estilo de notificação anterior para o tema da IU do jQuery, eu uso o seguinte trecho:

 novo PNotify (title: "jQuery UI Style", texto: "Ei, eu sou estilizado com o tema jQuery UI.", styling: "jqueryui");

Existe outra maneira de estilizar sua notificação, através deste código:

 PNotify.prototype.options.styling = "jqueryui";

mudança jqueryui com o estilo que você quer, então coloque esta linha antes da notificação assim:

 PNotify.prototype.options.styling = "jqueryui"; novo PNotify (title: "jQuery UI Style", texto: "Ei, estou estilizado com o tema jQuery UI.");

Aqui está o seu resultado, estilizado:

Adicionando Módulos

Módulos são APIs ricas que permitem recursos avançados de notificação. tem 7 módulos no PNotify: Desktop, Botões, NonBlock, Confirm, Histórico, Callbacks e Módulo de Referência. Os módulos podem ser usados passando suas opções apropriadas para a notificação.

Como exemplo, abaixo estão os códigos para mostrar a você como usar o Desktop Module:

 PNotify.desktop.permission (); novo PNotify (title: 'Desktop Notification', texto: 'Eu sou uma notificação de desktop. Você precisa me dar permissão para que eu possa aparecer como o que sou. Se não, eu vou me tornar uma notificação regular. ', desktop: desktop: true, ícone: null);

PNotify.desktop.permission (); é usado para garantir que os usuários tenham permissão dada para o site mostrar a notificação. Se os usuários não permitirem o site, a notificação será mostrado como um aviso regular em vez de.

Como você pode ver, há a opção adicional de adicionar Área de Trabalho para o código. o área de trabalho: true permitirá a notificação para o desktop; se você definir false, a notificação se tornará um aviso regular.

Você também pode usar um ícone personalizado através do ícone opção. Preencha com o URL do seu ícone. você pode configurá-lo falso para desativar o ícone. Se você definir com nulo, o ícone padrão será usado.

Para ver outras implementações de módulo com suas opções, acesse este link.

Você pode promover a implementação acessando seu site oficial. Lá você pode ver alguns usos avançados junto com as demos. Alternativamente, você pode visitar sua página do GitHub para informações adicionais..