Developing

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

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.

Advertisements

Comments on: "jQuery – Dialog" (11)

  1. Congratulations… I am brazilian and your site is perfect!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: