Esqueça as funções javascript alert() e confirm()

Uma das coisas que mais me incomoda em sistemas web é a enorme quantidade de alertas do sistema. Confirmações, perguntas, informações — todos utilizando o visual padrão do sistema operacional. Para nossa felicidade, a evolução do javascript permitiu que estes verdadeiros inimigos da usabilidade fossem substituídos por versões mais elegantes e amigáveis. Conheça uma delas, o plugin m2brDialog, para jQuery.

Apesar de neste artigo você conferir um método para substituir as janelas padrões de sistema, gostaria de começar com o seguinte conselho: evite o uso de confirmações. O Windows Vista é a maior prova de que inúmeras perguntas e avisos incomodam — e muito — qualquer usuário. Algumas alternativas incluem avisos de confirmação mais discretos, como o modelo lançado pelo Google, exibido no canto superior da tela, ou perguntas inline, exibidas de forma dinâmica diretamente no miolo do sistema. É claro que, em alguns casos, é necessário impedir que o usuário clique ou execute qualquer funcionalidade antes de confirmar a ação. É aí que entra o m2brDialog.

O objetivo principal deste plugin é substituir completamente o uso de alertas e confirmações padrões. Possui como dependências o framework javascript jQuery, além de sua extensão para interfaces caso você queira habilitar a opção de arrastar a janela. O m2brDialog funciona baseado no evento clique e seu visual é totalmente customizável, todo baseado em CSS — o tema padrão utiliza o set de ícones Tango, mas nada impede que você implemente suas próprias imagens.

Caso você precise de uma introdução ao jQuery, leia os primeiros parágrafos de meu artigo sobre uma interface drag and drop utilizando o framework.

Download: m2brDialog

Opções da extensão jQuery m2brDialog()

Confira o conjunto de opções disponíveis para configurar o alerta exibido:

m2brDialog na prática

Faça a chamada para os arquivos javascript do jQuery e do plugin m2brDialog dentro da tag head de seu HTML, bem como o link para a folha de estilos.

	<link rel="stylesheet" type="text/css" href="m2br.dialog.css" />
	<script src="jquery.js"></script>
	<script src="jquery.m2brdialog.pack.js"></script>
  

No exemplo abaixo, buscamos todos os elementos a (links) que possuam a classe "link-alerta" e atribuímos um alerta com a mensagem "Teste m2brDialog":

$(document).ready(function(){
	$('a.link-alerta').m2brDialog({
    	largura		: '300',
        altura		: '120,
        tipo		: 'alerta',
        titulo		: 'TESTE',
        texto		: 'Teste m2brDialog'
    });
});

Agora vamos criar uma janela de confirmação em todos os elementos com a classe "m2brdialog-pergunta", com os botões confirmar e cancelar. Caso o usuário clique em confirmar, será redirecionado para o link www.daviferreira.com. A janela também terá a propriedade de drag and drop:

$(document).ready(function(){
    $('.m2brdialog-pergunta').m2brDialog({
        tipo: 		'pergunta',
        titulo:		'Confirme',
        texto:		'Tem certeza que deseja executar esta operação?',
        draggable: true,
        botoes: {
            1: {
                label: 'confirmar',
                tipo: 'link',
                endereco: 'http://www.daviferreira.com'
            },
            2: {
                label: 'cancelar',
                tipo: 'fechar'
            }
        }
    });	
});    

Funções condicionais

Em alguns casos, precisaremos de uma condição para exibir ou não o alerta. Por exemplo, em um formulário, exibir a mensagem de alerta apenas se algum campo obrigatório não tiver sido preenchido. É para isto que serve o parâmetro de configuração avançada condicao. Esta propriedade recebe um vetor com duas funções. A primeira representa a condição e a segunda a URL de retorno caso esta condição seja verdadeira. Vejamos como funcionaria no exemplo do formulário citado anteriormente:

<form name="frm-newsletter" id="frm-newsletter" method="post" action="">
    <label for="email">Seu e-mail</label>
    <input type="text" name="email" id="email" size="60" />
    <input type="button" id="btn-newsletter" value="OK" />
</form>

<script type="text/javascript">
$(document).ready(function(){
    $('#btn-newsletter').m2brDialog({
        tipo			: 'erro',
        titulo			: 'Erro!',
        texto			: 'Por favor, preencha o campo e-mail',
        condicao		: {
            origem		: function() { 
							return ($('#email').val() ? true : false); 
			},
            retorno		: function() { return true; }
        }
    });
});
</script>

Note que na opção de configuração condicao são passados dois valores: origem e retorno. Na origem estamos validando o campo de id email, verificando se ele foi preenchido. Caso retorne true, ou seja, caso ele esteja preenchido, o alerta é ignorado e o script executa a função retorno — no nosso exemplo um simples return true;. O alerta de erro apenas será exibido caso o campo esteja vazio.

Demo: veja o m2brDialog em ação!

Pra finalizar, uma gambiarra

Nem sempre o alerta será exibido a partir de um clique em algum link ou botão. Uma função AJAX, por exemplo, pode retornar um alerta. Neste caso, utilizamos o código abaixo:

var alertaPadrao = function(titulo, msg, tipo, altura, largura) {
		$('body').append('<a href="#" id="alerta-padrao"></a>');
		$('#alerta-padrao').m2brDialog({
				draggable: true,
				texto: msg,
				tipo: tipo,
				titulo: titulo,
				altura: altura,
				largura: largura,
				botoes: {
					1: {
						label: 'Fechar',
						tipo: 'fechar'
					}
				}									   
		});
		$('#alerta-padrao')
			.click()
			.remove();
};

Sim, uma tremenda de uma gambiarra! O que este código faz é criar um elemento a, simular seu clique e depois destruí-lo. Vamos supor que sua função retorna um aviso de operação concluída. Seria só chamar o nosso alertaPadrao desse jeito:

<script type="text/javascript">
$(document).ready(function(){
	alertaPadrao('Informação:', 'Operação concluída com sucesso.', 'info', 110, 250);
});
</script>
  

E aí, curtiu? Em caso de dúvidas ou sugestões, envie um comentário utilizando o formulário abaixo. Até a próxima!

Atualizações [26/11/2008]

Código-fonte e arquivo CSS do script atualizados com correções enviadas pelo leitor Rômulo, envolvendo bugs nas versões 6 e 7 do Internet Explorer. Valeu, Rômulo! :)

Atualizações [08/12/2008]

A rapaziada levantou a bola nos comentários sobre como passar um código dinâmico para nossa janela de confirmação, para o caso de uma listagem com exclusão, por exemplo.

No código a seguir você confere como atingir este objetivo utilizando o método each() nativo do jQuery. O primeiro passo é criar o HTML da tabela. Note que no atributo id do a estou passando o código de nossos registros.

	
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="resultado">
	<thead>
		<tr>
			<th>Código</th>
			<th>Nome</th>
			<th>Ação</th>
		</tr>
	</thead>
	<tbody>
		<tr id="linha-1">
			<td>1</td>
			<td>Davi Ferreira</td>
			<td><a href="#" class="item-excluir" id="1"><img src="excluir.png" width="24" height="24" alt="excluir registro 1" /></a></td>
		</tr>
		<tr id="linha-2" class="alt">
			<td>2</td>
			<td>Rômulo</td>
			<td><a href="#" class="item-excluir" id="2"><img src="excluir.png" width="24" height="24" alt="excluir registro 2" /></a></td>
		</tr>
		<tr id="linha-3">
			<td>3</td>
			<td>Bruno</td>
			<td><a href="#" class="item-excluir" id="3"><img src="excluir.png" width="24" height="24" alt="excluir registro 3" /></a></td>
		</tr>
		<tr id="linha-4" class="alt">
			<td>4</td>
			<td>João Francisco</td>
			<td><a href="#" class="item-excluir" id="4"><img src="excluir.png" width="24" height="24" alt="excluir registro 4" /></a></td>
		</tr>
	</tbody>
</table>

Agora, através da chamada .each() varremos todos os elementos da tabela de resultado com a classe item-excluir e atribuímos nossa m2brDialog passando o código dos registros no Sim do botão.

$(document).ready(function(){
    $('table#resultado a.item-excluir').each(function(){
        var codigo = $(this).attr('id');
        $(this).m2brDialog({
            tipo: 		'pergunta',
            titulo:		'Confirme',
            texto:		'Tem certeza que deseja excluir o registro ID'+
                                '<span style="color:#ffff00">'+codigo+'</span>?',
            draggable: true,
            botoes: {
                1: {
                    label		: 'sim',
                    tipo		: 'link',
                    endereco	: 'excluir.php?codigo='+codigo
                },
                2: {
                    label		: 'não',
                    tipo		: 'fechar'
                }
            }
        });	
    });		
});

Clique aqui para conferir este exemplo.