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:
largura | valor inteiro que define a largura do aviso, em pixels |
altura | valor inteiro que define a altura do aviso, em pixels |
tipo | string indicando o tipo do aviso, estando disponíveis as seguintes opções: alerta, erro, pergunta e info |
titulo | string a ser exibida no título do aviso |
texto | conteúdo da mensagem do alerta |
draggable | true ou false para definir se o usuário pode arrastar e mover o aviso (depende da extensão jQuery UI) |
botoes | array com o conteúdo, tipo e links dos botões do aviso |
tempoExibicao | tempo de duração da exibição do alerta, em segundos |
condicao | array com funções que determinam a condição se o alerta deve ser exibido ou não (saiba mais abaixo) |
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’
- }
- }
- });
- });
- });
Referência/Criação: http://www.daviferreira.com/posts/esqueca-as-funcoes-javascript-alert-e-confirm