JqueryUI - Diálogo

As caixas de diálogo são uma das melhores maneiras de apresentar informações em uma página HTML. Uma caixa de diálogo é uma janela flutuante com um título e uma área de conteúdo. Esta janela pode ser movida, redimensionada e, claro, fechada usando o ícone "X" por padrão.

jQueryUI fornece dialog() método que transforma o código HTML escrito na página em código HTML para exibir uma caixa de diálogo.

Sintaxe

o dialog() método pode ser usado em duas formas -

Método $ (seletor, contexto) .dialog (opções)

O método de diálogo (opções) declara que um elemento HTML pode ser administrado na forma de uma caixa de diálogo. O parâmetro options é um objeto que especifica a aparência e o comportamento dessa janela.

Sintaxe

$(selector, context).dialog(options);

Você pode fornecer uma ou mais opções por vez usando o objeto Javascript. Se houver mais de uma opção a ser fornecida, você irá separá-las usando uma vírgula da seguinte forma -

$(selector, context).dialog({option1: value1, option2: value2..... });

A tabela a seguir lista as diferentes opções que podem ser usadas com este método -

Sr. Não. Opção e descrição
1 appendTo

Se esta opção estiver definida para false, vai prevenir o ui-draggableclasse seja adicionada na lista de elementos DOM selecionados. Por padrão, seu valor étrue.

Option - appendTo

Esta opção é usada para anexar uma caixa de diálogo ao elemento especificado. Por padrão, seu valor é"body".

Syntax

$(".selector").dialog(
   { appendTo: "#identifier" }
);
2 autoOpen

A menos que esta opção seja definida como falsa , a caixa de diálogo é aberta na criação. Quando falso , a caixa de diálogo será aberta após uma chamada para diálogo ('abrir'). Por padrão, seu valor étrue.

Option - autoOpen

A menos que esta opção seja definida como falsa , a caixa de diálogo é aberta na criação. Quando falso , a caixa de diálogo será aberta após uma chamada para diálogo ('abrir'). Por padrão, seu valor étrue.

Syntax

$(".selector").dialog(
   { autoOpen: false }
);
3 botões

Esta opção adiciona botões na caixa de diálogo. Eles são listados como objetos e cada propriedade é o texto do botão. O valor é uma função de retorno de chamada chamada quando o usuário clica no botão. Por padrão, seu valor é{}.

Option - buttons

Esta opção adiciona botões na caixa de diálogo. Eles são listados como objetos e cada propriedade é o texto do botão. O valor é uma função de retorno de chamada chamada quando o usuário clica no botão. Por padrão, seu valor é{}.

Esse manipulador é chamado com um contexto de função do elemento da caixa de diálogo e é passado para a instância do evento com o botão definido como a propriedade de destino. Se omitido, nenhum botão será criado para a caixa de diálogo.

Syntax

$(".selector").dialog(
   { buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] }
);
4 closeOnEscape

A menos que essa opção seja definida como falsa , a caixa de diálogo será fechada quando o usuário pressionar a tecla Escape enquanto a caixa de diálogo estiver em foco. Por padrão, seu valor étrue.

Option - closeOnEscape

A menos que essa opção seja definida como falsa , a caixa de diálogo será fechada quando o usuário pressionar a tecla Escape enquanto a caixa de diálogo estiver em foco. Por padrão, seu valor étrue.

Syntax

$(".selector").dialog(
   { closeOnEscape: false }
);
5 closeText

Esta opção contém texto para substituir o padrão de Fechar para o botão Fechar. Por padrão, seu valor é"close".

Option - closeText

Esta opção contém texto para substituir o padrão de Fechar para o botão Fechar. Por padrão, seu valor é"close".

Syntax

$(".selector").dialog(
   { closeText: "hide" }
);
6 dialogClass

Se esta opção estiver definida para false, vai prevenir o ui-draggableclasse seja adicionada na lista de elementos DOM selecionados. Por padrão, seu valor é"".

Option - dialogClass

Se esta opção estiver definida para false, vai prevenir o ui-draggableclasse seja adicionada na lista de elementos DOM selecionados. Por padrão, seu valor é"".

Syntax

$(".selector").dialog(
   { dialogClass: "alert" }
);
7 arrastável

A menos que você esta opção para false, a caixa de diálogo poderá ser arrastada clicando e arrastando a barra de título. Por padrão, seu valor étrue.

Option - draggable

A menos que você esta opção para false, a caixa de diálogo poderá ser arrastada clicando e arrastando a barra de título. Por padrão, seu valor étrue.

Syntax

$(".selector").dialog(
   { draggable: false }
);
8 altura

Esta opção define a altura da caixa de diálogo. Por padrão, seu valor é"auto".

Option - height

Se esta opção definir a altura da caixa de diálogo. Por padrão, seu valor é"auto". Esta opção pode ser do tipo -

Isso pode ser do tipo -

  • Number - Isso especifica a duração em milissegundos

  • String- O único valor de string suportado é auto, o que permitirá que a altura da caixa de diálogo se ajuste com base em seu conteúdo.

Syntax

$(".selector").dialog(
   { height: 400 }
);
9 ocultar

Esta opção é usada para definir o efeito a ser usado quando a caixa de diálogo é fechada. Por padrão, seu valor énull.

Option - hide

Esta opção é usada para definir o efeito a ser usado quando a caixa de diálogo é fechada. Por padrão, seu valor énull.

Isso pode ser do tipo -

  • Boolean- Os valores podem ser verdadeiros / falsos . Se false, nenhuma animação será usada e a caixa de diálogo será ocultada imediatamente. Se verdadeiro , a caixa de diálogo desaparecerá com a duração padrão e o atenuação padrão.

  • Number - A caixa de diálogo desaparecerá com a duração especificada e o easing padrão.

  • String- A caixa de diálogo será ocultada usando o efeito especificado, como slideUp , fold .

  • Object- Se o valor for um objeto, as propriedades de efeito, atraso, duração e atenuação podem ser fornecidas para ocultar a caixa de diálogo.

    10

Syntax

$(".selector").dialog(
   { hide: { effect: "explode", duration: 1000 } }
);
11 altura máxima

Esta opção define a altura máxima, em pixels, para a qual a caixa de diálogo pode ser redimensionada. Por padrão, seu valor éfalse.

Option - maxHeight

Esta opção define a altura máxima, em pixels, para a qual a caixa de diálogo pode ser redimensionada. Por padrão, seu valor éfalse.

Syntax

$(".selector").dialog(
   { maxHeight: 600 }
);
12 largura máxima

Esta opção define a largura máxima com a qual o diálogo pode ser redimensionado, em pixels. Por padrão, seu valor éfalse.

Option - maxWidth

Esta opção define a largura máxima com a qual o diálogo pode ser redimensionado, em pixels. Por padrão, seu valor éfalse.

Syntax

$(".selector").dialog(
   { maxWidth: 600 }
);
13 minHeight

Esta opção é a altura mínima, em pixels, para a qual a caixa de diálogo pode ser redimensionada. Por padrão, seu valor é150.

Option - minHeight

Esta opção é a altura mínima, em pixels, para a qual a caixa de diálogo pode ser redimensionada. Por padrão, seu valor é150.

Syntax

$(".selector").dialog(
   { minHeight: 200 }
);
14 minWidth

Esta opção é a largura mínima, em pixels, para a qual a caixa de diálogo pode ser redimensionada. Por padrão, seu valor é150.

Option - minWidth

Esta opção é a largura mínima, em pixels, para a qual a caixa de diálogo pode ser redimensionada. Por padrão, seu valor é150.

Syntax

$(".selector").dialog(
   { minWidth: 200 }
);
15 modal

Se esta opção estiver definida para true, a caixa de diálogo terá comportamento modal; outros itens na página serão desabilitados, ou seja, não podem ser interagidos. As caixas de diálogo modais criam uma sobreposição abaixo da caixa de diálogo, mas acima de outros elementos da página. Por padrão, seu valor éfalse.

Option - modal

Se esta opção estiver definida para true, a caixa de diálogo terá comportamento modal; outros itens na página serão desabilitados, ou seja, não podem ser interagidos. As caixas de diálogo modais criam uma sobreposição abaixo da caixa de diálogo, mas acima de outros elementos da página. Por padrão, seu valor éfalse.

Syntax

$(".selector").dialog(
   { modal: true }
);
16 posição

Esta opção especifica a posição inicial da caixa de diálogo. Pode ser uma das posições predefinidas: centro (o padrão), esquerda, direita, superior ou inferior . Também pode ser uma matriz de 2 elementos com os valores esquerdo e superior (em pixels) como [esquerda, topo] ou posições de texto como ['direita', 'topo']. Por padrão, seu valor é{ my: "center", at: "center", of: window }.

Option - position

Esta opção especifica a posição inicial da caixa de diálogo. Pode ser uma das posições predefinidas: centro (o padrão), esquerda, direita, superior ou inferior . Também pode ser uma matriz de 2 elementos com os valores esquerdo e superior (em pixels) como [esquerda, topo] ou posições de texto como ['direita', 'topo']. Por padrão, seu valor é{ my: "center", at: "center", of: window }.

Syntax

$(".selector").dialog(
   { position: { my: "left top", at: "left bottom", of: button } }
);
17 redimensionável

Esta opção, a menos que definida como false, a caixa de diálogo é redimensionável em todas as direções. Por padrão, seu valor étrue.

Option - resizable

Esta opção, a menos que definida como false, a caixa de diálogo é redimensionável em todas as direções. Por padrão, seu valor étrue.

Syntax

$(".selector").dialog(
   { resizable: false }
);
18 exposição

Esta opção é um efeito a ser usado quando a caixa de diálogo está sendo aberta. Por padrão, seu valor énull.

Option - show

Esta opção é um efeito a ser usado quando a caixa de diálogo está sendo aberta. Por padrão, seu valor énull.

Isso pode ser do tipo -

  • Boolean- Os valores podem ser verdadeiros / falsos . Se false, nenhuma animação será usada e a caixa de diálogo será exibida imediatamente. Se verdadeiro , a caixa de diálogo desaparecerá com a duração padrão e o atenuação padrão.

  • Number - A caixa de diálogo aparecerá gradualmente com a duração especificada e o easing padrão.

  • String- A caixa de diálogo será exibida usando o efeito especificado, como slideDown , fold .

  • Object- Se o valor for um objeto, as propriedades de efeito, atraso, duração e atenuação podem ser fornecidas para mostrar a caixa de diálogo.

    19

Syntax

$(".selector").dialog(
   { show: { effect: "blind", duration: 800 } }
);
20 título

Esta opção especifica o texto a ser exibido na barra de título da caixa de diálogo. Por padrão, seu valor énull.

Option - title

Esta opção especifica o texto a ser exibido na barra de título da caixa de diálogo. Por padrão, seu valor énull.

Syntax

$(".selector").dialog(
   { title: "Dialog Title" }
);
21 largura

Esta opção especifica a largura da caixa de diálogo em pixels. Por padrão, seu valor é300.

Option - width

Esta opção especifica a largura da caixa de diálogo em pixels. Por padrão, seu valor é300.

Syntax

$(".selector").dialog(
   { width: 500 }
);

A seção a seguir mostrará alguns exemplos de funcionamento da funcionalidade de diálogo.

Funcionalidade padrão

O exemplo a seguir demonstra um exemplo simples de funcionalidade de diálogo, sem passar parâmetros para o dialog() método.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-1" 
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener">Open Dialog</button>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML dialogexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

Uso de botões, título e posição

O exemplo a seguir demonstra o uso de três opções buttons, title e position no widget de diálogo do JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2" ).dialog({
               autoOpen: false, 
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Success",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() {
               $( "#dialog-2" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-2"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-2">Open Dialog</button>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML dialogexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

Uso de ocultar, mostrar e altura

O exemplo a seguir demonstra o uso de três opções hide, show e height no widget de diálogo do JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "puff",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-3"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-3">Open Dialog</button>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML dialogexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

Uso de Modal

O exemplo a seguir demonstra o uso de três opções buttons, title e position no widget de diálogo do JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-4" ).dialog({
               autoOpen: false, 
               modal: true,
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
            });
            $( "#opener-4" ).click(function() {
               $( "#dialog-4" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-4">Open Dialog</button>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
         laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <label for = "textbox">Enter Name: </label>
      <input type = "text">
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML dialogexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

$ (seletor, contexto) .dialog ("action", [params]) Método

O método de diálogo (ação, parâmetros) pode executar uma ação na caixa de diálogo, como fechar a caixa. oaction é especificado como uma string no primeiro argumento e, opcionalmente, um ou mais params pode ser fornecido com base na ação dada.

Basicamente, aqui as ações não são nada, mas são métodos jQuery que podemos usar na forma de string.

Sintaxe

$(selector, context).dialog ("action", [params]);

A tabela a seguir lista as ações para este método -

Sr. Não. Ação e Descrição
1 Fechar()

Esta ação fecha a caixa de diálogo. Este método não aceita nenhum argumento.

Action - close()

Esta ação fecha a caixa de diálogo. Este método não aceita nenhum argumento.

Syntax

$(".selector").dialog("close");
2 destruir()

Esta ação remove a caixa de diálogo completamente. Isso retornará o elemento de volta ao seu estado pré-inicialização. Este método não aceita nenhum argumento.

Action - destroy()

Esta ação remove a caixa de diálogo completamente. Isso retornará o elemento de volta ao seu estado pré-inicialização. Este método não aceita nenhum argumento.

Syntax

$(".selector").dialog("destroy");
3 está aberto()

Esta ação verifica se a caixa de diálogo está aberta. Este método não aceita nenhum argumento.

Action - isOpen()

Esta ação verifica se a caixa de diálogo está aberta. Este método não aceita nenhum argumento.

Syntax

$(".selector").dialog("isOpen");
4 moveToTop ()

Esta ação posiciona as caixas de diálogo correspondentes em primeiro plano (em cima das outras). Este método não aceita nenhum argumento.

Action - moveToTop()

Esta ação posiciona as caixas de diálogo correspondentes em primeiro plano (em cima das outras). Este método não aceita nenhum argumento.

Syntax

$(".selector").dialog("moveToTop");
5 abrir()

Esta ação abre a caixa de diálogo. Este método não aceita nenhum argumento.

Action - open()

Esta ação abre a caixa de diálogo. Este método não aceita nenhum argumento.

Syntax

$(".selector").dialog("open");
6 opção (optionName)

Esta ação obtém o valor atualmente associado ao optionName especificado. Onde optionName é o nome da opção a ser obtida .

Action - option( optionName )

Esta ação obtém o valor atualmente associado ao optionName especificado. Onde optionName é o nome da opção a ser obtida .

Syntax

var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
7 opção()

Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções da caixa de diálogo atual. Este método não aceita nenhum argumento.

Action - option()

Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções da caixa de diálogo atual. Este método não aceita nenhum argumento.

Syntax

var options = $( ".selector" ).dialog( "option" );
8 opção (optionName, value)

Esta ação define o valor da opção de diálogo associada ao optionName especificado.

Action - option( optionName, value )

Esta ação define o valor da opção de diálogo associada ao optionName especificado.

Syntax

$(".selector").dialog( "option", "disabled", true );
9 opção (opções)

Esta ação define uma ou mais opções para o diálogo.

Action - option( options )

Esta ação define uma ou mais opções para o diálogo.

Syntax

$(".selector").dialog( "option", { disabled: true });
10 ferramenta()

Esta ação retorna o elemento widget da caixa de diálogo; o elemento anotado com o nome da classe ui-dialog. Este método não aceita nenhum argumento.

Action - widget()

Esta ação retorna o elemento widget da caixa de diálogo; o elemento anotado com o nome da classe ui-dialog. Este método não aceita nenhum argumento.

Syntax

$(".selector").dialog("widget");

Exemplo

Agora vamos ver um exemplo usando as ações da tabela acima. O exemplo a seguir demonstra o uso dos métodos isOpen () , open () e close () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $("#toggle").click(function() {
               ($("#dialog-5").dialog("isOpen") == false) ? $(
                  "#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>
   
   <body>
      <button id = "toggle">Toggle dialog!</button>
      <div id = "dialog-5" title = "Dialog Title!">
         Click on the Toggle button to open and close this dialog box.
      </div>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML dialogexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

Gerenciamento de eventos na caixa de diálogo

Além do método de diálogo (opções) que vimos nas seções anteriores, JqueryUI fornece métodos de evento que são acionados para um evento específico. Esses métodos de evento estão listados abaixo -

Sr. Não. Método e descrição do evento
1 beforeClose (evento, ui)

Este evento é acionado quando a caixa de diálogo está prestes a fechar. Retornar false impede que a caixa de diálogo feche. É útil para caixas de diálogo com formulários que falham na validação. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - beforeClose(event, ui)

Este evento é acionado quando a caixa de diálogo está prestes a fechar. Retornar false impede que a caixa de diálogo feche. É útil para caixas de diálogo com formulários que falham na validação. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Syntax

$(".selector").dialog (
   beforeClose: function(event, ui) {}
);
2 fechar (evento, ui)

Este evento é disparado quando a caixa de diálogo é fechada. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - close(event, ui)

Este evento é disparado quando a caixa de diálogo é fechada. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Syntax

$(".selector").dialog (
   close: function(event, ui) {}
);
3 criar (evento, ui)

Este evento é disparado quando a caixa de diálogo é criada. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - create(event, ui)

Este evento é disparado quando a caixa de diálogo é criada. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Syntax

$(".selector").dialog (
   create: function(event, ui) {}
);
4 arrastar (evento, ui)

Este evento é disparado repetidamente conforme uma caixa de diálogo é movida durante um arrasto. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - drag(event, ui)

Este evento é disparado repetidamente conforme uma caixa de diálogo é movida durante um arrasto. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • position - Um objeto jQuery que representa a posição CSS atual da caixa de diálogo.

  • offset - Um objeto jQuery que representa a posição de deslocamento atual da caixa de diálogo.

Syntax

$(".selector").dialog (
   drag: function(event, ui) {}
);
5 dragStart (evento, ui)

Este evento é disparado quando um reposicionamento da caixa de diálogo começa arrastando sua barra de título. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - dragStart(event, ui)

Este evento é disparado quando um reposicionamento da caixa de diálogo começa arrastando sua barra de título. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • position - Um objeto jQuery que representa a posição CSS atual da caixa de diálogo.

  • offset - Um objeto jQuery que representa a posição de deslocamento atual da caixa de diálogo.

Syntax

$(".selector").dialog (
   dragStart: function(event, ui) {}
);
6 dragStop (evento, ui)

Este evento é disparado quando uma operação de arrastar termina. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - dragStop(event, ui)

Este evento é disparado quando uma operação de arrastar termina. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • position - Um objeto jQuery que representa a posição CSS atual da caixa de diálogo.

  • offset - Um objeto jQuery que representa a posição de deslocamento atual da caixa de diálogo.

Syntax

$(".selector").dialog (
   dragStop: function(event, ui) {}
);
7 foco (evento, ui)

Este evento é acionado quando o diálogo ganha foco. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - focus(event, ui)

Este evento é acionado quando o diálogo ganha foco. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Syntax

$(".selector").dialog (
   focus: function(event, ui) {}
);
8 aberto (evento, ui)

Este evento é disparado quando a caixa de diálogo é aberta. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - open(event, ui)

Este evento é disparado quando a caixa de diálogo é aberta. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Syntax

$(".selector").dialog (
   open: function(event, ui) {}
);
9 redimensionar (evento, ui)

Este evento é disparado repetidamente conforme uma caixa de diálogo é redimensionada. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - resize(event, ui)

Este evento é disparado repetidamente conforme uma caixa de diálogo é redimensionada. Onde o evento é do tipo Evento e ui é do tipo Objeto. Os valores possíveis de ui são -

  • originalPosition - Um objeto jQuery que representa a posição CSS do diálogo antes de ser redimensionado.

  • position - Um objeto jQuery que representa a posição CSS atual da caixa de diálogo.

  • originalSize - Um objeto jQuery que representa o tamanho da caixa de diálogo antes de ser redimensionado.

  • size - Um objeto jQuery que representa o tamanho atual da caixa de diálogo.

Syntax

$(".selector").dialog (
   resize: function(event, ui) {}
);
10 resizeStart (evento, ui)

Este evento é disparado quando um redimensionamento da caixa de diálogo começa. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - resizeStart(event, ui)

Este evento é disparado quando um redimensionamento da caixa de diálogo começa. Onde o evento é do tipo Evento e ui é do tipo Objeto. Os valores possíveis de ui são -

  • originalPosition - Um objeto jQuery que representa a posição CSS do diálogo antes de ser redimensionado.

  • position - Um objeto jQuery que representa a posição CSS atual da caixa de diálogo.

  • originalSize - Um objeto jQuery que representa o tamanho da caixa de diálogo antes de ser redimensionado.

  • size - Um objeto jQuery que representa o tamanho atual da caixa de diálogo.

Syntax

$(".selector").dialog (
   resizeStart: function(event, ui) {}
);
11 resizeStop (evento, ui)

Este evento é disparado quando um redimensionamento da caixa de diálogo termina. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - resizeStop(event, ui)

Este evento é disparado quando um redimensionamento da caixa de diálogo termina. Onde o evento é do tipo Evento e ui é do tipo Objeto. Os valores possíveis de ui são -

  • originalPosition - Um objeto jQuery que representa a posição CSS do diálogo antes de ser redimensionado.

  • position - Um objeto jQuery que representa a posição CSS atual da caixa de diálogo.

  • originalSize - Um objeto jQuery que representa o tamanho da caixa de diálogo antes de ser redimensionado.

  • size - Um objeto jQuery que representa o tamanho atual da caixa de diálogo.

Syntax

$(".selector").dialog (
   resizeStop: function(event, ui) {}
);

Os exemplos a seguir demonstram o uso dos eventos listados na tabela acima.

Uso do método beforeClose Event

O exemplo a seguir demonstra o uso de beforeClose método de evento.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .invalid { color: red; }
         textarea {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-6" ).dialog({
	       autoOpen: false, 
               buttons: {
                  OK: function() {
                     $( this ).dialog( "close" );
                  }
               },
               beforeClose: function( event, ui ) {
                  if ( !$( "#terms" ).prop( "checked" ) ) {
                     event.preventDefault();
                     $( "[for = terms]" ).addClass( "invalid" );
                  }
               },
               width: 600
            });
            $( "#opener-5" ).click(function() {
               $( "#dialog-6" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-6">
         <p>You must accept these terms before continuing.</p>
         <textarea>This Agreement and the Request constitute the entire agreement of the 
         parties with respect to the subject matter of the Request. This Agreement shall be 
         governed by and construed in accordance with the laws of the State, without giving 
         effect to principles of conflicts of law.</textarea>
         <div>
            <label for = "terms">I accept the terms</label>
            <input type = "checkbox" id = "terms">
         </div>
      </div>
      <button id = "opener-5">Open Dialog</button>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML dialogexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

Uso do método de evento de redimensionamento

O exemplo a seguir demonstra o uso de resize método de evento.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-7" ).dialog({
               autoOpen: false, 
               resize: function( event, ui ) {
                  $( this ).dialog( "option", "title",
	         ui.size.height + " x " + ui.size.width );
               }
            });
            $( "#opener-6" ).click(function() {
               $( "#dialog-7" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-7" title = "Dialog Title goes here..."
         >Resize this dialog to see the dialog co-ordinates in the title!</div>
      <button id = "opener-6">Open Dialog</button>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML dialogexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

Pontos de Extensão

O widget de diálogo é construído com a fábrica de widgets e pode ser estendido. Para estender widgets, podemos substituir ou adicionar ao comportamento de métodos existentes. O método a seguir fornece como ponto de extensão a mesma estabilidade de API dos métodos de diálogo. Listado na tabela acima .

Sr. Não. Método e Descrição
1 _allowInteraction (event)

Este método permite que o usuário interaja com um determinado elemento de destino, colocando na lista de permissões elementos que não são filhos do diálogo, mas permitem que os usuários possam usá-los. Onde o evento é do tipo Evento .

Extension Point - allowInteraction(event, ui)

Este método permite que o usuário interaja com um determinado elemento de destino, colocando na lista de permissões elementos que não são filhos do diálogo, mas permitem que os usuários possam usá-los. Onde o evento é do tipo Evento .

Code Example

_allowInteraction: function( event ) {
  return !!$( event.target ).is( ".select2-input" ) || this._super( event );
}

  • O plugin Select2 é usado em diálogos modais

  • A chamada super () garante que os elementos da caixa de diálogo ainda possam interagir.
O jQuery UI Widget Factory é uma base extensível na qual todos os widgets do jQuery UI são construídos. Usar a fábrica de widgets para construir um plugin fornece conveniências para gerenciamento de estado, bem como convenções para tarefas comuns, como expor métodos de plugin e alterar opções após a instanciação.