El cuadro de diálogo es la forma de informar al usuario sobre algo. Es una buena manera de aparecer en la ventana del usuario para mostrar la información que sucederá en el siguiente o cualquier tipo de información que el desarrollador quiera aclarar al usuario que debería saber. El método de diálogo jQueryUI se usa para crear una ventana de diálogo básica dentro de la página. Tiene una barra de título y un área de contenido y se puede mover, cambiar de tamaño y cerrar con el icono ‘X’ de forma predeterminada. El evento de enfoque se activa cuando el cuadro de diálogo gana el foco.
Sintaxis:
$(".selector").dialog (
focused: function( event, ui ) {
console.log('focused')
},
Enlace CDN: Primero, agregue los scripts de jQuery Mobile necesarios para su proyecto.
<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>
Ejemplo 1:
- El botón ‘Abrir diálogo’ activará la función de clic (#gfg) que abrirá aún más el ‘área de texto’ en un cuadro de diálogo (#gfg2).
- focus (evento, ui): el cuadro de desenstringdores gana el foco. Hay una función de devolución de llamada adjunta a este enfoque.
evento : Tipo -> Eventoui: Tipo -> Objeto
función de devolución de llamada: función (evento, ui) {console.log (‘enfocado’)}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<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>
<script type="text/javascript">
$(function () {
$("#gfg2").dialog({
autoOpen: false,
focus: function (event, ui) {
console.log("focused");
},
});
$("#gfg").click(function () {
$("#gfg2").dialog("open");
});
});
</script>
</head>
<body>
<div id="gfg2" title="GeeksforGeeks">
<textarea>jQuery UI | focus(event, ui) Event</textarea>
</div>
<button id="gfg">Open Dialog</button>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/1.9/dialog/#event-focus