La ventana de diálogo básica es una superposición colocada dentro de la ventana gráfica y está protegida del contenido de la página, que es la interfaz de usuario de jQuery. Para deshabilitar el botón en un cuadro de diálogo de jQuery desde una función realizada con jQuery según los siguientes enfoques.
Enfoque 1:
- En el cuadro de diálogo UI, el botón como clase predeterminada se llama ui-button, así que concéntrese en él.
- Cree una función que debería activar el cuadro de diálogo listo que está en la carga de la página.
- Luego use el método jQuery prop(‘disabled’, true) para deshabilitar ese botón con class ui-button.
Sintaxis:
$(selector).dialog();
$(selector).prop('disabled', true);
Ejemplo: El siguiente ejemplo ilustra cómo deshabilitar un botón en un cuadro de diálogo jQuery desde una función con la ayuda del método prop().
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href=
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src=
"https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style>
.ui-widget-header {
background: green;
color: #ffffff;
}
#dialog {
box-shadow: 1rem .5rem 1rem
rgba(0, 0, 0, .15) !important;
padding: 20px;
}
</style>
</head>
<body>
<div id="dialog" title="jQuery UI Basic dialog">
<p>
This is the default dialog which is useful
for displaying information. The dialog
window can be moved, resized and closed
with the 'x' icon or use close button below,
but it is disable using jQuery's prop();
method.
</p>
<button type="button" class=
"ui-button ui-widget" title="Close">
Close
</button>
</div>
<script>
$(function() {
// Trigger dialog box
$("#dialog").dialog();
// attr() method applied here
$(".ui-button").prop('disabled', true);
});
</script>
</body>
</html>
Producción:
Enfoque 2:
- En el cuadro de diálogo UI, el botón como clase predeterminada se llama ui-button, así que concéntrese en él.
- Cree una función que debería activar el cuadro de diálogo listo que está en la carga de la página.
- Luego use el método jQuery attr(‘disabled’, true) para deshabilitar ese botón con class ui-button.
Sintaxis:
$(selector).dialog();
$(selector).attr('disabled', true);
Ejemplo: El siguiente ejemplo ilustra cómo deshabilitar un botón en un cuadro de diálogo jQuery desde una función con la ayuda del método attr().
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="
https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style>
.ui-widget-header {
background: red;
color: #ffffff;
}
#dialog {
box-shadow: 1rem .5rem 1rem rgba(
0, 0, 0, .15)!important;
padding: 20px;
}
</style>
</head>
<body>
<div id="dialog"
title="jQuery UI Basic dialog">
<p>
This is the default dialog which is
useful for displaying information.
The dialog window can be moved,
resized and closed with the 'x'
icon or use close button below,
but it is disable using jQuery's
attr(); method.
</p>
<button type="button" class=
"ui-button ui-widget" title="Close">
Close
</button>
</div>
<script>
$(function() {
// Trigger dialog box
$("#dialog").dialog();
// attr() method applied here
$(".ui-button").attr('disabled', true);
});
</script>
</body>
</html>
Producción:
Referencia: https://www.geeksforgeeks.org/jqueryui-dialog/
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA