[jQuery] Mensagem de erro simples, mas elegante

Logo que entrei no estágio, o meu chefe pediu para que eu criasse uma alternativa para exibir as mensagens de erro dos sistemas que ele desenvolvia. Dando uma olhada na documentação do jQuery percebi que poderia criar algo fácil, mas elegante. Segue duas screen-shots para mostrar a aparência final:

A implementação é bem simples, primeiramente você necessitará do jQuery (clique para baixar) e chama-lo de forma correta no cabeçalho de seu site (<HEAD> / </HEAD>):

<script type=”text/javascript” src=”/js/jquery.js”></script>

Você vai precisar declarar uma div com a id “aviso” dentro do corpo de seu site, com o seguinte CSS:

#aviso{position:fixed;
display:none;
top:0px;
left:50%;
width:261px;
margin-left:-150px;
min-height:30px;
padding:3px 3px 3px 36px;
background:#f00;
font-size:12px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
z-index:999;}

No exemplo acima, defini uma div com posição fixa, no topo de forma centralizada. Possui 261 pixels de largura por uma altura mínima de 30 pixels.

Foi aplicado também um padding para que pudesse abrigar o ícone (que será inserido via jQuery). Foi definido um z-index elevado para que a mensagem sobrepusesse qualquer elemento da página.

Com o “esqueleto” pronto, vamos ao código que fará o serviço “sujo”:

function avisaTopo(tipo,msg){
switch (tipo){
case “warning”:$(“#aviso”).css({“background”:”url(images/warning_icon.png) no-repeat 10px 10px #ffffa3″,”border”:”solid 1px #ffd175″});break;
case “error”:$(“#aviso”).css({“background”:”url(images/error_icon.png) no-repeat 10px 10px #fdf0eb”,”border”:”solid 1px #cd0a0a”});break;
case “information”:$(“#aviso”).css({“background”:”url(images/information_icon.png) no-repeat 10px 10px #eaf4f7″,”border”:”solid 1px #6796a5″});break;
}
$(“#aviso”).html(“”).append(msg).slideDown(“fast”).delay(3500).slideUp(“fast”);
}

A função acima recebe uma variável que define o tipo do aviso (pode ser warning, error ou information) e a mensagem a ser inserida.

Eu geralmente utilizo uma variável “msg” que vai acumulando as mensagens, e ao final de uma verificação de formulário chamo da seguinte forma:

if(msg){

avisaTopo(“error”,msg);

} else {

//O que será feito em caso de sucesso…

}

O switch é responsável por atribuir estilos para a div #aviso.

Depois da execução do switch, a função apaga qualquer conteúdo que tenha sido inserido dentro da div, insere a mensagem recebida através da chamada da função, rola o aviso para baixo, aguarda 3500 milesegundos e oculta o aviso.

Espero que tenham gostado dessa pequena, mas eficiente solução. Isso casado com uma verificação via Ajax fica supimpa, mas isso é assunto pra outro post 😛