Tutorial: 5 plugins Javascript para mensagens de notificação muito mais legais

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 é 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: http://needim.github.com/noty/
Licença: GPL

Exemplo:

 <script type="text/javascript" src="jquery.min.js"></script>  
 <script type="text/javascript" src="js/noty/jquery.noty.js"></script>  
 <script type="text/javascript" src="js/noty/layouts/top.js"></script>  
 <script type="text/javascript" src="js/noty/layouts/topLeft.js"></script>  
 <script type="text/javascript" src="js/noty/layouts/topRight.js"></script>  
 <script type="text/javascript" src="js/noty/themes/default.js"></script>  
 

 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. 

Pines Notyfy

Site: http://pinesframework.org/pnotify/

Licença: GPL, LGPL, e MPL.

Exemplo: 

 $.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: http://www.myjqueryplugins.com/jquery-plugin/jnotify
Licença: GPL
Exemplo de uso:

 <!-- JS to add -->  
 <script type="text/javascript">  
  $(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: 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: 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! ;)

Tutorial upload de arquivos com jQuery e PHP

E aí pessoal, beleza? Dessa vez vamos aprender como implementar a funcionalidade de upload de arquivos utilizando PHP e jQuery. O jQuery (http://jquery.com/) é uma biblioteca Javascript que busca simplificar a implementação de tarefas como manipulação de HTML, tratamento de eventos, animação, Ajax, etc. No nosso artigo usaremos o jQuery basicamente para recuperar o status corrente do upload através de chamadas assíncronas ao servidor.

Visão Geral deste Tutorial

Como já adiantamos, o tutorial consiste de uma página com um campo para upload de arquivos. O arquivo escolhido será enviado via Ajax ao servidor, que, por sua vez, retornará para o cliente o percentual do arquivo que já foi copiado. Este valor será atualizado automaticamente e será exibido em uma div para o usuário. 

Código do Lado do Cliente

No lado do cliente temos uma página simples HTML. Nela definimos um form, que contém um campo do tipo file para que o usuário possa escolher o arquivo para upload e também temos um botão de submit. Até aí, nada demais. A mágica acontece graças ao jQuery. Para este tutorial, utilizamos o plugin jQuery Form, que possibilita o uso de chamadas Ajax em formulários HTML de forma bastante simples. 

Primeiramente, é necessário incluir as bibliotecas javascript do jQuery e do jQuery Form Plugin. Utilizei para este exemplo as bibliotecas disponíveis no googlepais e github, mas você pode (e geralmente deve) baixá-las para o seu servidor e fazer referência a elas.

Após isso, nós definimos um objeto do tipo Options, especificado pelo jQuery Forms Plugin, que conterá atributos referentes à chamada Ajax. Para o nosso exemplo, nós especificamos funções de callback:

beforeSend: Função chamada imediatamente antes do envio do formulário. Geralmente usadas para esquemas de validação pré-submissão. No nosso caso, apenas exibimos uma mensagem via alert.

uploadProgress: Função callback a ser invocada com as informações do progresso do upload. Aqui nós atualizamos uma div com o percentual do upload concluído.

success: Define a função de callback a ser chamada após o envio do formulário. Aqui, apenas um alert será exibido.

error: Função chamada em caso de erro.

Por fim, preparamos o nosso form para ser submetido via Ajax com a chamada $("#uploadForm").ajaxForm(options),  , passando como parâmetro as opções acima.

Veja o código completo:

 <html>  
  <head>  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
  <script src="http://malsup.github.com/jquery.form.js"></script>  
  <title>Upload de arquivos com progresso usando com Ajax, jQuery e PHP</title>  
  <script>  
      $(document).ready(function() {  
           var options = {  
                beforeSend: function() {  
                     alert("Antes de mandar!");  
                },  
                uploadProgress: function(event, position, total, percentComplete) {                      
                     $("#status").html("Percentual completado: " + percentComplete + "%");  
                },  
                success: function() {  
                     alert("Upload concluido!");  
                },  
                error: function() {  
                     alert("Falha ao fazer upload de arquivo.");  
                }  
           };  
           $("#uploadForm").ajaxForm(options);  
      });  
  </script>  
  </head>  
  <body>  
 <h1>Validação de formulário com Ajax e PHP</h1>  
 <form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">  
  Arquivo para upload: <input name="myFile" id="user" type="file" />  
  <input type="submit" value="Enviar!" />  
 </form>  
 <div id="status" />  
 </body>  
 </html>  

Código do Lado do Servidor

O código server-side é uma função simples de upload de arquivos em PHP. Basicamente, o servidor recebe o arquivo no objeto $_FILES e o copia para a pasta /upload/ na raiz do site através da função move_uploaded_file.

Veja o código do arquivo upload.php:

 <?php  
 define ('SITE_ROOT', realpath(dirname(__FILE__)));  
 //upload.php  
 $output_dir = "/upload/";  
 if(isset($_FILES["myFile"]))  
 {  
   //Filter the file types , if you want.  
   if ($_FILES["myFile"]["error"] > 0)  
   {  
    echo "Error: " . $_FILES["file"]["error"] . "<br>";  
   }  
   else  
   {  
     //move the uploaded file to uploads folder;  
     move_uploaded_file($_FILES["myFile"]["tmp_name"],SITE_ROOT. $output_dir. $_FILES["myFile"]["name"]);  
    echo "Uploaded File :".$_FILES["myFile"]["name"];  
   }  
 }  
 ?>  

Então, pessoal, espero que esse tutorial tenha ajudado vocês a conhecerem um pouco mais do poder do jQuery e da sua integração com uma linguagem server-side - no caso, PHP. Dúvidas, sugestões ou críticas? Deixe um comentário! ;)