Alertas amigáveis com a API SweetAlert

A maioria das aplicações web precisam, em algum momento retornar um feedback para o usuário, ou solicitar alguma informação através de janelas de alerta ou janelas popup. O javascript puro oferece as funções alert, confirm e prompt para tal propósito, mas além de bloquear o navegador, o layout dessas janelas não é configurável, variando de acordo com o navegador. Devido a esses problemas, a maioria das pessoas preferem desenvolver suas próprias janelas popups com o uso de divs e css. Essa solução funciona bem, se você tiver bastante paciência para definir a janela, manipular a interação através do javascript, tratar incompatibilidades de browser etc. etc. Para quem não quer ter todo esse trabalho, existem APIs específicas para exibição de janelas que já vem com um layout padrão, mas que pode ser alterado via css, e já trata da interação da janela de forma simples. Nesse post vou descrever uma dessas APIs, o SweetAlert, que fornece alertas bastante agradáveis, e que podem ser utilizadas de forma bem simples.

Baixando e incluindo na página

Para utilizar o SweetAlert, é preciso baixar o pacote no site da API. Para este exemplo, será necessário também baixar o jquery.

Descompacte o pacote e inclua os arquivos sweetalert.min.js e sweetalert.css, que estão na pasta sweetalert-master/dist do pacote,  na sessão head do seu arquivo html. Inclua também o jquery, conforme exemplo a seguir:

<head>
   <script type="text/javascript" src="jquery-1.11.3.js" ></script>
   <script type="text/javascript" src="sweetalert.min.js" ></script>
   <link href="sweetalert.css" rel="stylesheet" type="text/css" />
</head>

Criando a primeira janela

Para criar um alerta, é bem simples. Primeiro, crie um botão para disparar a exibição da janela:

<body>
   <input type="button" id="alerta" value="Clique aqui" />
</body>

Inclua no evento do clique do botão a chamada à função swal(“Mensagem”), da seguinte forma:

$(document).ready(function(){
   $("#alerta").click(function(){
      swal("Hello world!");
   });
});

A janela ficará centralizada na página, com um efeito de sombra na parte de trás da janela, conforme Figura 1:

alerta
Figura 1 – Mensagem de alerta simples

 

Configurando

O exemplo anterior exibe uma janela popup com o layout default da API e um botão Ok. É possível também criar janelas de erro, com entrada de dados, que fecham sozinha, que fecham ao clicar fora da janela, enfim, são várias opções. Para personalizar sua janela, inclua as propriedades na própria função swal, da seguinte forma:

$("#alerta").click(function(){
   swal({
	   title: "Teste 7",
	   text: "Vou fechar sozinho",
	   timer: 1200,
	   showConfirmButton: false
   });
});

A propriedade “title” define o texto principal da janela, ou seja, o título.

A propriedade “text” exibe um texto menor que o título.

A propriedade “timer” define o tempo para fechar a janela, em milisegundos.

A propriedade “showConfirmButton” define se o botão Ok será exibido ou não.

Além das apresentadas, seguem mais algumas propriedades interessantes. A lista completa está disponível no site da API:

  • type: tipo de popup. Aceita as opções “warning”, “error”, “success”, “info”, “input”;
  • allowEscapeKey: define se a janela será fechada ao clicar no botão ESC;
  • customClass: define um css diferente para o popup;
  • allowOutsideClick: define se a janela será fechada ao clicar fora da janela;
  • inputValue: exibe um campo de texto no popup;
  • imageUrl: exibe uma imagem no popup;

A API também possui 4 funções:

  • swal.setDefaults({ confirmButtonColor: ‘#0000’ }): alterando as propriedades padrão;
  • swal.close(): fecha a janela programaticamente;
  • swal.showInputError(“Mensagem de erro!”): exibe uma mensagem após validação do campo de texto;
  • swal.disableButtons(): desabilitar botões cancelar/confirmar;

Segue exemplo de utilização de função. O resultado é exibido na Figura 2:

$("#alerta").click(function(){
   swal ({
	   title: "Teste 9",
	   text: "Qual é o sentido da vida",
	   type: "input",
	   closeOnConfirm: false
	},
	function (valor){
	     if (valor === false) 
		return false;      
	     if (valor === ""){     
	        swal.showInputError("Nem um palpite?");     
	        return false   
	     }      
	     swal("Parabéns!", "Você disse: " + valor, "success");					
   });
});
input
Figura 2 – Mensagem de alerta com input

 

 

Prático né?

 

Até a próxima!

Por MARCIA TANIMOTO

Formada em Informática - UEM/Maringá. Analista de Sistemas, apaixonada pela profissão, curiosa e MATERANA de coração.

Postado em: 30 de novembro de 2015

Confira outros artigos do nosso blog

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

Three laws that enable agile software development

09 de março de 2017

Celso Gonçalves Junior

Medindo performance de uma API REST

21 de fevereiro de 2017

Monise Costa

Deixe seu comentário