jQuery – Dialog

Introduction

Uma prática muito comum nas aplicações desktop é a utilização de caixa de diálogo para exibir informações, como por exemplo a famosa mensagem com um ‘X’ vermelho ou com uma ‘!’ nos indicando um erro ou simplesmente uma informação.

Nesse post mostrarei como fazer uma caixa de diálogo em aplicações Web utilizando jQuery Dialog (ou jQuery MessageBox).

This post shows how to use a dialog jQuery (a MessageBox jQuery) on Web applications.

jQuery – Dialog

Desktop MessageBox

Nas aplicações desktop essa funcionalidade é feita simplesmente utilizando-se um simples comando. Em C# esse comando é feito por:

MessageBox.Show(“Olá”);

Adicionando alguns parâmetros nessa linha de código é possível informar quais botões desejamos exibir na caixa e até mesmo qual ícone representará a mensagem.

Web Application MessageBox

Porém fazer isso em aplicações Web é um pouco mais “chato” visto ser necessário a utilização de javascript, o famoso alert(“Olá”) e o resultado não agrada a maioria dos desenvolvedores. Esse é o meio mais simples de se fazer isso, porém, a maioria recorre ao uso de CSS e faz seus próprios PopUps  Mas graças ao poder do jQuery podemos fazer caixas de diálogo realmente muito elegantes e sem dor de cabeça. Nesse post será abordado como exibir uma caixa de diálogo em aplicações Web utilizando jQuery.

jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function () {
var $dialog = $('
<div></div>

').html('Usuário Cadastrado com sucesso!').dialog({
autoOpen: false,
title: 'Informação',
modal: true,
buttons: [
{
text: 'Ok',
click: function() { $(this).dialog('close'); }
} ]
});
jQuery('.label').click(function () {
$dialog.dialog('open');
return false;
});
function ShowAlert(message) {
alert(message);
}
});
// ]]></script>

<a href="#">Clique aqui</a>

Referências

jQuery UI

jQuery UI – Dialog

MessageBox Class

MessageBox.Show Method

Veja Também

jQuery – Disable HTML Controls

javascript – ReplaceAt

jQuery – Themes List at Google Code

jQuery – .ready

jwplayer – Show First Frame

javascript – Detect Mobile

_____

Não se esqueça de deixar seu comentário, critica, elogio, dúvida e etc. Ele é muito importante para a melhoria do blog.
Do not forget to leave your comments, criticism, praise, questions, etc.. It is very important for improving the blog.