Tutorial: 5 plugins Javascript para mensagens de notificação muito mais legais
Autor: Bruno Nunes | Publicado: 2014-01-22T18:27:00-03:00

Cansado de ver aquela janelinha padrão do browser nas mensagens de alerta e confirmação da sua aplicação? Nesse post apresentarei uma lista de cinco excelentes plugins Javascript para dar um upgrade no visual da sua aplicação. Confira:


1. noty


noty&nbsp;é um plugin jQuery que facilita a tarefa de criação de mensagens de alerta, confirmação, informação, sucesso e erro como alternativa às caixas de diálogo padrão do navegador. A API do plugin fornece opções para customização do texto, layout, animação, velocidade e botões.









Site:&nbsp;http://needim.github.com/noty/
Licença: GPL
Exemplo:



 &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;  
 &lt;script type="text/javascript" src="js/noty/jquery.noty.js"&gt;&lt;/script&gt;  
 &lt;script type="text/javascript" src="js/noty/layouts/top.js"&gt;&lt;/script&gt;  
 &lt;script type="text/javascript" src="js/noty/layouts/topLeft.js"&gt;&lt;/script&gt;  
 &lt;script type="text/javascript" src="js/noty/layouts/topRight.js"&gt;&lt;/script&gt;  
 &lt;script type="text/javascript" src="js/noty/themes/default.js"&gt;&lt;/script&gt;  
 

 var noty = noty({text: 'noty - a jquery notification library!'});  


2. Pines Notify

O Pines Notify é um plugin Javascript para mensagens de notificação desenvolvido como parte do framework Pines. É flexível e muito fácil de implementar e utilizar.&nbsp;




Pines Notyfy






Site:&nbsp;http://pinesframework.org/pnotify/

Licença: GPL, LGPL, e MPL.

Exemplo:&nbsp;


 $.pnotify({
   title: 'Regular Notice',
   text: 'Tutoriais é '
 });




3. jNotify

O jNotify é um plugin jQuery para mensagens de notificação não-obstrutivas para sistemas web. O usuário pode ser informado sobre ações específicas realizadas pelo sistema, como, por exemplo, a finalização de uma chamada assíncrona ao servidor via Ajax.








Site:&nbsp;http://www.myjqueryplugins.com/jquery-plugin/jnotify
Licença: GPL
Exemplo de uso:

 &lt;!-- JS to add --&gt;  
 &lt;script type="text/javascript"&gt;  
  $(document).ready(function(){  
   $("a.jnotify_exemple").click(function(e){  
       e.preventDefault();  
       jNotify(  
           'Tutorial mensagem de alerta com jNotify!',  
           {  
            autoHide : true, // added in v2.0  
            clickOverlay : false, // added in v2.0  
            MinWidth : 250,  
            TimeShown : 3000,  
            ShowTimeEffect : 200,  
            HideTimeEffect : 200,  
            LongTrip :20,  
            HorizontalPosition : 'center',  
            VerticalPosition : 'top',  
            ShowOverlay : true,  
              ColorOverlay : '#000',  
            OpacityOverlay : 0.3,  
            onClosed : function(){ // added in v2.0  
            },  
            onCompleted : function(){ // added in v2.0  
            }  
           });  
       });  
   });  




4. Alertify.js

O alertify.js investe em facilidade de uso, beleza e capacidade de customização para as mensagens de notificação da sua aplicação. Não depende de outras bibliotecas ou frameworks e já possui suporte a diversos navegadores e dispositivos móveis.





Site:&nbsp;http://fabien-d.github.io/alertify.js/
Licença: MIT
Exemplo:

 // alert dialog  
 alertify.alert("Tutorial Alertify.js");  
 // confirm dialog  
 alertify.confirm("Message", function (e) {  
   if (e) {  
     // user clicked "ok"  
   } else {  
     // user clicked "cancel"  
   }  
 });  
 // prompt dialog  
 alertify.prompt("Message", function (e, str) {  
   // str is the input text  
   if (e) {  
     // user clicked "ok"  
   } else {  
     // user clicked "cancel"  
   }  
 }, "Default Value");  



5. Humane.js

O Humane.js é uma boa opção para quem deseja um sistema de notificação simples, moderno e independente de framework. Inclui suporte à aplicações para dispositivos móveis.









Site:&nbsp;http://wavded.github.io/humane-js/

Licença: Não disponível

Exemplo:


 var notify = humane.create({ timeout: 4000, baseCls: 'humane-bigbox' })  
 notify.log('Custom Notifier')  



Gostou das sugestões? Deixe um comentário! ;)