Alert em JavaScript e jQuery UI Dialog

Olá pessoal, neste artigo vamos falar sobre alert em javascript. O alert é um recurso muito utilizado em javascript porque com ele é possível criar caixas de diálogos que aparecem na tela do usuário.

Existem diferentes tipos de caixa de diálogo, são elas:

alerta
confirmação
prompt de entrada.

Alert em Javascript

O alert é uma das mais simples caixas de diálogo, com uma aparência simples e intuitiva elas são muito usadas em validações de formulários e/ou bloqueio de ações do browser.

Sua principal função é mostrar ao usuário uma mensagem e um botão de confirmação de que o usuário tenha visto a mensagem. Para chamar essa função, basta utilizarmos o código alert(), que receberá uma string(mensagem que será exibida ao usuário).

Para entendermos melhor vejamos o código javascript da função:

Listagem 1: Alert em Javascript

<!DOCTYPE html>

<html>

<head>

<title>Tutorial de Alert em Javascript - Linha de Código</title>

<script>

function funcao1()

{

alert("Eu sou um alert!");

}

</script>

</head>

<body>

<input type="button" onclick="funcao1()" value="Exibir Alert" />

</body>

</html>

O resultado do código acima deverá ser o mesmo que o resultado abaixo:

Figura 1: Alert em javascript

Alert de Confirmação em Javascript

A função de confirmação é um pouco diferente da função alert em javascript, dessa vez são exibidos dois botões, um de OK e outro de CANCELAR, separados por valores true(verdadeiro) e false(falso).

A função confirm() é muito utilizada em sistemas que utilizamos estruturas condicionais, como confirmação de alteração/exclusão de algum registro do banco de dados.

Na listagem 2 iremos ver como utilizar a função confirm.

Listagem 2: Confirmação em javascript

<!DOCTYPE html>

<html>

<head>

<title>Tutorial de Alert em Javascript - Linha de Código</title>

</head>

<body>

<p>Clique no botão para exibir a caixa de confirmação.</p>

<button onclick="funcao1()">Clique aqui</button>

<p id="demo"></p>

<script>

function funcao1()

{

var x;

var r=confirm("Escolha um valor!");

if (r==true)

  {

  x="você pressionou OK!";

  }

else

  {

  x="Você pressionou Cancelar!";

  }

document.getElementById("demo").innerHTML=x;

}

</script>

</body>

</html>

O resultado o código a seguir deverá ser o mesmo que a figura 2:

Figura 2: Confirmação em javascript

Alert de Prompt em javascript

O prompt é um pouco diferente do alert() e do confirm(), pois ele necessita que o usuário insira algum valor, ou seja, precisa de uma interação direta do usuário para que ele funcione.

Para chamarmos a função utilizamos o prompt(), o qual irá receber uma string(mensagem) que será exibida, normalmente em forma de pergunta, ao usuário.

A estrutura básica dessa caixa de diálogo é:

Um campo input
Botão OK
Botão Cancelar

A função sempre irá retornar um valor, tudo que o usuário digitar no campo input será convertido em valor e será exibido na tela.

No exemplo abaixo iremos criar uma caixa de prompt onde o usuário deverá digitar a sua idade e a mesma será exibida para ele depois.

Listagem 3: Prompt em javascript

<!DOCTYPE html>

<html>

<head>

<title>Tutorial de Alert em Javascript - Linha de Código</title>

</head>

<body>

<p>Clique para exibir.</p>

<button onclick="myFunction()">Clique aqui</button>

<p id="demo"></p>

<script>

function myFunction()

{

var x;

var idade=prompt("Digite sua idade:");

if (idade!=null)

  {

  x="Idade: " + idade + " anos.";

  document.getElementById("demo").innerHTML=x;

  }

}

</script>

</body>

</html>

O resultado gerado deverá ser o mesmo que na figura 3 e 4.

Figura 3: Prompt em javascript

Figura 4: Resultado do Prompt em javascript

Pulando linha no alert

Além das opções mostradas nesse tutorial, existe também a possibilidade de pularmos linha em nossoalert em javascript, para isso basta usar o “\n”, como podemos ver na listagem 4.

Listagem 4: Pulando linha no alert

<!DOCTYPE html>

<html>

<head>

<title>Tutorial de Alert em Javascript - Linha de Código</title>

<script>

function funcao1()

{

alert("Eu sou um\nAlert!");

}

</script>

</head>

<body>

<input type="button" onclick="funcao1()" value="Exibir Alert" />

</body>

</html>

O resultado será o exibido na Figura 5.

Figura 5: Pulando linha no alert

jQuery UI Dialog

Como alguns browsers possuem uma função de bloquear o alert em javascript, existe uma forma alternativa de proporcionar essa experiência ao usuário, ela é o Dialog do jQuery UI, ela é uma biblioteca que basicamente faz o mesmo efeito do alert, só que com algumas funcionalidades a mais como animações, etc.

Primeiro faça o download do jQuery UI no site oficial e coloque os arquivos baixados na mesma pasta da sua página.

Abaixo irei colocar o código-fonte do plugin implementado e depois o link de download dos arquivos utilizados. O código é bem simples e de fácil entendimento, qualquer dúvida podem ficar a vontade de comentar o artigo que irei ajudar com o maior prazer.

Listagem 5: jQuery UI Dialog

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Tutorial de Alert em Javascript - Linha de Código</title>

    <link type="text/css" href="jqueryui/css/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />

    <script type="text/javascript" src="jqueryui/js/jquery-1.8.2.min.js"></script>

    <script type="text/javascript" src="jqueryui/js/jquery-ui-1.8.24.custom.min.js"></script>

    <script type="text/javascript">

            $(function(){

                // Dialog

                $('#dialog').dialog({

                    autoOpen: false,

                    width: 600,

                    buttons: {

                        "Ok": function() {

                            $(this).dialog("close");

                        },

                        "Cancel": function() {

                            $(this).dialog("close");

                        }

                    }

                });

                // Dialog Link

                $('#dialog_link').click(function(){

                    $('#dialog').dialog('open');

                    return false;

                });         

                //hover states on the static widgets

                $('#dialog_link, ul#icons li').hover(

                    function() { $(this).addClass('ui-state-hover'); },

                    function() { $(this).removeClass('ui-state-hover'); }

                );

            });

        </script>

        <style type="text/css">

            /*demo page css*/

            body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}

            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}

            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}

        </style>

</head>

<body>

    <!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->

        <h2 class="demoHeaders">Dialog</h2>

        <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Abrir Dialog</a></p>

            <!-- ui-dialog -->

        <div id="dialog" title="Aqui você coloca o título">

            <p>Texto que fica dentro do dialog</p>

        </div>

</body>

</html>

Para fazer o download do exemplo do jQuery UI Dialog, basta clicar no link a seguir: Exemplo de Alert em Javascript usando jQuery UI

Neste tutorial vimos como trabalhar com os diversos tipos de alert em javascript de uma forma simples e objetiva, além de vermos também como implementar o jQuery UI Dialog.

Espero que tenham gostado e até o próximo tutorial.

FONTE : Iinhadecodigo