JqueryUI - Diálogo

Los cuadros de diálogo son una de las formas agradables de presentar información en una página HTML. Un cuadro de diálogo es una ventana flotante con un título y un área de contenido. Esta ventana se puede mover, cambiar de tamaño y, por supuesto, cerrar con el icono "X" de forma predeterminada.

jQueryUI proporciona dialog() método que transforma el código HTML escrito en la página en código HTML para mostrar un cuadro de diálogo.

Sintaxis

los dialog() El método se puede utilizar de dos formas:

$ (selector, contexto) .dialog (opciones) Método

El método dialog (opciones) declara que un elemento HTML se puede administrar en forma de cuadro de diálogo. El parámetro de opciones es un objeto que especifica la apariencia y el comportamiento de esa ventana.

Sintaxis

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

Puede proporcionar una o más opciones a la vez utilizando el objeto Javascript. Si hay más de una opción para proporcionar, las separará con una coma de la siguiente manera:

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

La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:

No Señor. Opción y descripción
1 appendTo

Si esta opción se establece en false, evitará el ui-draggableclass para que no se agregue a la lista de elementos DOM seleccionados. Por defecto su valor estrue.

Option - appendTo

Esta opción se utiliza para agregar un cuadro de diálogo al elemento especificado. Por defecto su valor es"body".

Syntax

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

Esta opción, a menos que se establezca en falso , el cuadro de diálogo se abre al crearse. Cuando es falso , el cuadro de diálogo se abrirá al llamar al diálogo ('abrir'). Por defecto su valor estrue.

Option - autoOpen

Esta opción, a menos que se establezca en falso , el cuadro de diálogo se abre al crearse. Cuando es falso , el cuadro de diálogo se abrirá al llamar al diálogo ('abrir'). Por defecto su valor estrue.

Syntax

$(".selector").dialog(
   { autoOpen: false }
);
3 botones

Esta opción agrega botones en el cuadro de diálogo. Estos se enumeran como objetos y cada propiedad es el texto del botón. El valor es una función de devolución de llamada llamada cuando el usuario hace clic en el botón. Por defecto su valor es{}.

Option - buttons

Esta opción agrega botones en el cuadro de diálogo. Estos se enumeran como objetos y cada propiedad es el texto del botón. El valor es una función de devolución de llamada llamada cuando el usuario hace clic en el botón. Por defecto su valor es{}.

Este controlador se invoca con un contexto de función del elemento del cuadro de diálogo y se pasa la instancia del evento con el botón establecido como propiedad de destino. Si se omite, no se crean botones para el cuadro de diálogo.

Syntax

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

A menos que esta opción se establezca en falso , el cuadro de diálogo se cerrará cuando el usuario presione la tecla Escape mientras el cuadro de diálogo tiene el foco. Por defecto su valor estrue.

Option - closeOnEscape

A menos que esta opción se establezca en falso , el cuadro de diálogo se cerrará cuando el usuario presione la tecla Escape mientras el cuadro de diálogo tiene el foco. Por defecto su valor estrue.

Syntax

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

Esta opción contiene texto para reemplazar el valor predeterminado de Cerrar para el botón de cierre. Por defecto su valor es"close".

Option - closeText

Esta opción contiene texto para reemplazar el valor predeterminado de Cerrar para el botón de cierre. Por defecto su valor es"close".

Syntax

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

Si esta opción se establece en false, evitará el ui-draggableclass para que no se agregue a la lista de elementos DOM seleccionados. Por defecto su valor es"".

Option - dialogClass

Si esta opción se establece en false, evitará el ui-draggableclass para que no se agregue a la lista de elementos DOM seleccionados. Por defecto su valor es"".

Syntax

$(".selector").dialog(
   { dialogClass: "alert" }
);
7 arrastrable

A menos que tenga esta opción para false, el cuadro de diálogo se podrá arrastrar haciendo clic y arrastrando la barra de título. Por defecto su valor estrue.

Option - draggable

A menos que tenga esta opción para false, el cuadro de diálogo se podrá arrastrar haciendo clic y arrastrando la barra de título. Por defecto su valor estrue.

Syntax

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

Esta opción establece la altura del cuadro de diálogo. Por defecto su valor es"auto".

Option - height

Si esta opción establece la altura del cuadro de diálogo. Por defecto su valor es"auto". Esta opción puede ser de tipo -

Esto puede ser de tipo:

  • Number - Esto especifica la duración en milisegundos.

  • String- El único valor de cadena admitido es auto, que permitirá que la altura del diálogo se ajuste en función de su contenido.

Syntax

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

Esta opción se utiliza para establecer el efecto que se utilizará cuando se cierre el cuadro de diálogo. Por defecto su valor esnull.

Option - hide

Esta opción se utiliza para establecer el efecto que se utilizará cuando se cierre el cuadro de diálogo. Por defecto su valor esnull.

Esto puede ser de tipo:

  • Boolean- Los valores pueden ser verdaderos / falsos . Si es falso, no se utilizará ninguna animación y el diálogo se ocultará inmediatamente. Si es verdadero , el diálogo desaparecerá con la duración predeterminada y la aceleración predeterminada.

  • Number - El cuadro de diálogo desaparecerá con la duración especificada y la aceleración predeterminada.

  • String- El diálogo se ocultará con el efecto especificado, como slideUp , fold .

  • Object- Si el valor es un objeto, entonces se pueden proporcionar propiedades de efecto, retraso, duración y suavizado para ocultar el diálogo.

    10

Syntax

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

Esta opción establece la altura máxima, en píxeles, a la que se puede cambiar el tamaño del cuadro de diálogo. Por defecto su valor esfalse.

Option - maxHeight

Esta opción establece la altura máxima, en píxeles, a la que se puede cambiar el tamaño del cuadro de diálogo. Por defecto su valor esfalse.

Syntax

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

Esta opción establece el ancho máximo al que se puede cambiar el tamaño del cuadro de diálogo, en píxeles. Por defecto su valor esfalse.

Option - maxWidth

Esta opción establece el ancho máximo al que se puede cambiar el tamaño del cuadro de diálogo, en píxeles. Por defecto su valor esfalse.

Syntax

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

Esta opción es la altura mínima, en píxeles, a la que se puede cambiar el tamaño del cuadro de diálogo. Por defecto su valor es150.

Option - minHeight

Esta opción es la altura mínima, en píxeles, a la que se puede cambiar el tamaño del cuadro de diálogo. Por defecto su valor es150.

Syntax

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

Esta opción es el ancho mínimo, en píxeles, al que se puede cambiar el tamaño del cuadro de diálogo. Por defecto su valor es150.

Option - minWidth

Esta opción es el ancho mínimo, en píxeles, al que se puede cambiar el tamaño del cuadro de diálogo. Por defecto su valor es150.

Syntax

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

Si esta opción se establece en true, el diálogo tendrá un comportamiento modal; otros elementos de la página se desactivarán, es decir, no se podrá interactuar con ellos. Los diálogos modales crean una superposición debajo del diálogo pero sobre otros elementos de la página. Por defecto su valor esfalse.

Option - modal

Si esta opción se establece en true, el diálogo tendrá un comportamiento modal; otros elementos de la página se desactivarán, es decir, no se podrá interactuar con ellos. Los diálogos modales crean una superposición debajo del diálogo pero sobre otros elementos de la página. Por defecto su valor esfalse.

Syntax

$(".selector").dialog(
   { modal: true }
);
dieciséis posición

Esta opción especifica la posición inicial del cuadro de diálogo. Puede ser una de las posiciones predefinidas: centro (predeterminado), izquierda, derecha, arriba o abajo . También puede ser una matriz de 2 elementos con los valores izquierdo y superior (en píxeles) como [left, top] o posiciones de texto como ['right', 'top']. Por defecto su valor es{ my: "center", at: "center", of: window }.

Option - position

Esta opción especifica la posición inicial del cuadro de diálogo. Puede ser una de las posiciones predefinidas: centro (predeterminado), izquierda, derecha, arriba o abajo . También puede ser una matriz de 2 elementos con los valores izquierdo y superior (en píxeles) como [left, top] o posiciones de texto como ['right', 'top']. Por defecto su valor es{ my: "center", at: "center", of: window }.

Syntax

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

Esta opción a menos que se establezca en false, se puede cambiar el tamaño del cuadro de diálogo en todas las direcciones. Por defecto su valor estrue.

Option - resizable

Esta opción a menos que se establezca en false, se puede cambiar el tamaño del cuadro de diálogo en todas las direcciones. Por defecto su valor estrue.

Syntax

$(".selector").dialog(
   { resizable: false }
);
18 show

Esta opción es un efecto que se utilizará cuando se abra el cuadro de diálogo. Por defecto su valor esnull.

Option - show

Esta opción es un efecto que se utilizará cuando se abra el cuadro de diálogo. Por defecto su valor esnull.

Esto puede ser de tipo:

  • Boolean- Los valores pueden ser verdaderos / falsos . Si es falso, no se utilizará ninguna animación y el diálogo se mostrará inmediatamente. Si es verdadero , el diálogo se desvanecerá con la duración predeterminada y la aceleración predeterminada.

  • Number - El diálogo se desvanecerá con la duración especificada y el suavizado predeterminado.

  • String- El cuadro de diálogo se mostrará utilizando el efecto especificado, como slideDown , fold .

  • Object- Si el valor es un objeto, entonces se pueden proporcionar propiedades de efecto, retardo, duración y suavizado para mostrar el diálogo.

    19

Syntax

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

Esta opción especifica el texto que aparecerá en la barra de título del cuadro de diálogo. Por defecto su valor esnull.

Option - title

Esta opción especifica el texto que aparecerá en la barra de título del cuadro de diálogo. Por defecto su valor esnull.

Syntax

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

Esta opción especifica el ancho del cuadro de diálogo en píxeles. Por defecto su valor es300.

Option - width

Esta opción especifica el ancho del cuadro de diálogo en píxeles. Por defecto su valor es300.

Syntax

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

La siguiente sección le mostrará algunos ejemplos prácticos de la funcionalidad del diálogo.

Funcionalidad predeterminada

El siguiente ejemplo muestra un ejemplo simple de funcionalidad de diálogo que no pasa parámetros al 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>

Guardemos el código anterior en un archivo HTML dialogexample.htmy ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

Uso de botones, título y posición

El siguiente ejemplo demuestra el uso de tres opciones buttons, title y position en el widget de diálogo de 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>

Guardemos el código anterior en un archivo HTML dialogexample.htmy ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

Uso de hide, show y altura

El siguiente ejemplo demuestra el uso de tres opciones hide, show y height en el widget de diálogo de 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>

Guardemos el código anterior en un archivo HTML dialogexample.htmy ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

Uso de modal

El siguiente ejemplo demuestra el uso de tres opciones buttons, title y position en el widget de diálogo de 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>

Guardemos el código anterior en un archivo HTML dialogexample.htmy ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

$ (selector, context) .dialog ("action", [params]) Método

El método dialog (action, params) puede realizar una acción en el cuadro de diálogo, como cerrar el cuadro. losaction se especifica como una cadena en el primer argumento y, opcionalmente, uno o más params se puede proporcionar en función de la acción dada.

Básicamente, aquí las acciones no son nada, pero son métodos jQuery que podemos usar en forma de cadena.

Sintaxis

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

La siguiente tabla enumera las acciones para este método:

No Señor. Acción Descripción
1 cerca()

Esta acción cierra el cuadro de diálogo. Este método no acepta argumentos.

Action - close()

Esta acción cierra el cuadro de diálogo. Este método no acepta argumentos.

Syntax

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

Esta acción elimina completamente el cuadro de diálogo. Esto devolverá el elemento a su estado previo al inicio. Este método no acepta argumentos.

Action - destroy()

Esta acción elimina completamente el cuadro de diálogo. Esto devolverá el elemento a su estado previo al inicio. Este método no acepta argumentos.

Syntax

$(".selector").dialog("destroy");
3 Esta abierto()

Esta acción comprueba si el cuadro de diálogo está abierto. Este método no acepta argumentos.

Action - isOpen()

Esta acción comprueba si el cuadro de diálogo está abierto. Este método no acepta argumentos.

Syntax

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

Esta acción coloca los cuadros de diálogo correspondientes en primer plano (encima de los demás). Este método no acepta argumentos.

Action - moveToTop()

Esta acción coloca los cuadros de diálogo correspondientes en primer plano (encima de los demás). Este método no acepta argumentos.

Syntax

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

Esta acción abre el cuadro de diálogo. Este método no acepta argumentos.

Action - open()

Esta acción abre el cuadro de diálogo. Este método no acepta argumentos.

Syntax

$(".selector").dialog("open");
6 opción (optionName)

Esta acción obtiene el valor asociado actualmente con el optionName especificado. Donde optionName es el nombre de la opción a obtener.

Action - option( optionName )

Esta acción obtiene el valor asociado actualmente con el optionName especificado. Donde optionName es el nombre de la opción a obtener.

Syntax

var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
7 opción()

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de diálogo actual. Este método no acepta argumentos.

Action - option()

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de diálogo actual. Este método no acepta argumentos.

Syntax

var options = $( ".selector" ).dialog( "option" );
8 opción (optionName, valor)

Esta acción establece el valor de la opción de diálogo asociada con el optionName especificado.

Action - option( optionName, value )

Esta acción establece el valor de la opción de diálogo asociada con el optionName especificado.

Syntax

$(".selector").dialog( "option", "disabled", true );
9 opción (opciones)

Esta acción establece una o más opciones para el diálogo.

Action - option( options )

Esta acción establece una o más opciones para el diálogo.

Syntax

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

Esta acción devuelve el elemento widget del cuadro de diálogo; el elemento anotado con el nombre de la clase ui-dialog. Este método no acepta argumentos.

Action - widget()

Esta acción devuelve el elemento widget del cuadro de diálogo; el elemento anotado con el nombre de la clase ui-dialog. Este método no acepta argumentos.

Syntax

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

Ejemplo

Ahora veamos un ejemplo usando las acciones de la tabla anterior. El siguiente ejemplo demuestra el uso de los métodos isOpen () , open () y 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>

Guardemos el código anterior en un archivo HTML dialogexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:

Gestión de eventos en el cuadro de diálogo

Además del método de diálogo (opciones) que vimos en las secciones anteriores, JqueryUI proporciona métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a continuación:

No Señor. Método y descripción del evento
1 beforeClose (evento, ui)

Este evento se activa cuando el cuadro de diálogo está a punto de cerrarse. Devolver falso evita que se cierre el cuadro de diálogo. Es útil para cuadros de diálogo con formularios que no se validan. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - beforeClose(event, ui)

Este evento se activa cuando el cuadro de diálogo está a punto de cerrarse. Devolver falso evita que se cierre el cuadro de diálogo. Es útil para cuadros de diálogo con formularios que no se validan. Donde evento es de tipo Evento y ui es de tipo Objeto .

Syntax

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

Este evento se activa cuando se cierra el cuadro de diálogo. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - close(event, ui)

Este evento se activa cuando se cierra el cuadro de diálogo. Donde evento es de tipo Evento y ui es de tipo Objeto .

Syntax

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

Este evento se activa cuando se crea el cuadro de diálogo. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - create(event, ui)

Este evento se activa cuando se crea el cuadro de diálogo. Donde evento es de tipo Evento y ui es de tipo Objeto .

Syntax

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

Este evento se activa repetidamente cuando se mueve un cuadro de diálogo durante un arrastre. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - drag(event, ui)

Este evento se activa repetidamente cuando se mueve un cuadro de diálogo durante un arrastre. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • position - Un objeto jQuery que representa la posición CSS actual del diálogo.

  • offset - Un objeto jQuery que representa la posición de compensación actual del diálogo.

Syntax

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

Este evento se activa cuando comienza un reposicionamiento del cuadro de diálogo arrastrando su barra de título. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - dragStart(event, ui)

Este evento se activa cuando comienza un reposicionamiento del cuadro de diálogo arrastrando su barra de título. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • position - Un objeto jQuery que representa la posición CSS actual del diálogo.

  • offset - Un objeto jQuery que representa la posición de compensación actual del diálogo.

Syntax

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

Este evento se activa cuando finaliza una operación de arrastre. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - dragStop(event, ui)

Este evento se activa cuando finaliza una operación de arrastre. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • position - Un objeto jQuery que representa la posición CSS actual del diálogo.

  • offset - Un objeto jQuery que representa la posición de compensación actual del diálogo.

Syntax

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

Este evento se activa cuando el diálogo gana foco. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - focus(event, ui)

Este evento se activa cuando el diálogo gana foco. Donde evento es de tipo Evento y ui es de tipo Objeto .

Syntax

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

Este evento se activa cuando se abre el cuadro de diálogo. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - open(event, ui)

Este evento se activa cuando se abre el cuadro de diálogo. Donde evento es de tipo Evento y ui es de tipo Objeto .

Syntax

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

Este evento se activa repetidamente cuando se cambia el tamaño de un cuadro de diálogo. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - resize(event, ui)

Este evento se activa repetidamente cuando se cambia el tamaño de un cuadro de diálogo. Donde evento es de tipo Evento y ui es de tipo Objeto. Los valores posibles de ui son:

  • originalPosition - Un objeto jQuery que representa la posición CSS del diálogo antes de cambiar su tamaño.

  • position - Un objeto jQuery que representa la posición CSS actual del diálogo.

  • originalSize - Un objeto jQuery que representa el tamaño del diálogo antes de cambiar su tamaño.

  • size - Un objeto jQuery que representa el tamaño actual del diálogo.

Syntax

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

Este evento se activa cuando comienza un cambio de tamaño del cuadro de diálogo. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - resizeStart(event, ui)

Este evento se activa cuando comienza un cambio de tamaño del cuadro de diálogo. Donde evento es de tipo Evento y ui es de tipo Objeto. Los valores posibles de ui son:

  • originalPosition - Un objeto jQuery que representa la posición CSS del diálogo antes de cambiar su tamaño.

  • position - Un objeto jQuery que representa la posición CSS actual del diálogo.

  • originalSize - Un objeto jQuery que representa el tamaño del diálogo antes de cambiar su tamaño.

  • size - Un objeto jQuery que representa el tamaño actual del diálogo.

Syntax

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

Este evento se activa cuando termina un cambio de tamaño del cuadro de diálogo. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - resizeStop(event, ui)

Este evento se activa cuando termina un cambio de tamaño del cuadro de diálogo. Donde evento es de tipo Evento y ui es de tipo Objeto. Los valores posibles de ui son:

  • originalPosition - Un objeto jQuery que representa la posición CSS del diálogo antes de cambiar su tamaño.

  • position - Un objeto jQuery que representa la posición CSS actual del diálogo.

  • originalSize - Un objeto jQuery que representa el tamaño del diálogo antes de cambiar su tamaño.

  • size - Un objeto jQuery que representa el tamaño actual del diálogo.

Syntax

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

Los siguientes ejemplos demuestran el uso de los eventos enumerados en la tabla anterior.

Uso del método de evento beforeClose

El siguiente ejemplo demuestra el 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>

Guardemos el código anterior en un archivo HTML dialogexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:

Uso del método de cambio de tamaño del evento

El siguiente ejemplo demuestra el 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>

Guardemos el código anterior en un archivo HTML dialogexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:

Puntos de extensión

El widget de diálogo se crea con la fábrica de widgets y se puede ampliar. Para extender los widgets, podemos anular o agregar al comportamiento de los métodos existentes. El siguiente método proporciona como punto de extensión la misma estabilidad de API que los métodos de diálogo. Listado en la tabla anterior .

No Señor. Método y descripción
1 _allowInteraction (evento)

Este método permite al usuario interactuar con un elemento de destino dado mediante la inclusión de elementos en la lista blanca que no son hijos del cuadro de diálogo, pero que permiten que los usuarios puedan usar. Donde evento es de tipo Evento .

Extension Point - allowInteraction(event, ui)

Este método permite al usuario interactuar con un elemento de destino dado mediante la inclusión de elementos en la lista blanca que no son hijos del cuadro de diálogo, pero que permiten que los usuarios puedan usar. Donde evento es de tipo Evento .

Code Example

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

  • El complemento Select2 se usa dentro de los diálogos modales

  • La llamada super () garantiza que los elementos dentro del cuadro de diálogo aún se puedan interactuar.
La fábrica de widgets de jQuery UI es una base extensible en la que se construyen todos los widgets de jQuery UI. El uso de la fábrica de widgets para crear un complemento proporciona conveniencias para la gestión del estado, así como convenciones para tareas comunes como exponer métodos de complemento y cambiar opciones después de la creación de instancias.