La interfaz de usuario de jQuery consta de widgets de GUI, efectos visuales y temas implementados mediante jQuery, CSS y HTML. jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. El widget giratorio jQueryUI nos ayuda a incrementar y disminuir los valores de un elemento de entrada usando las flechas hacia arriba y hacia abajo. En este artículo, veremos cómo usar la opción deshabilitada en el control deslizante de jQuery UI. La opción deshabilitada se usa para deshabilitar jQuery UI spinner. De forma predeterminada, el valor es falso.
Sintaxis:
$( ".selector" ).spinner(
{ disabled: boolean}
);
Parámetros: esta opción acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- booleano: este parámetro contiene el valor verdadero y falso.
Enlace CDN: Primero, agregue el enlace CDN de jQuery UI scripts, necesario para su tarea.
<enlace href = «https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css» rel = «hoja de estilo»>
<secuencia de comandos src = «https://code.jquery.com/jquery-1.10.2.js»></secuencia de comandos>
<secuencia de comandos src = «https://code.jquery.com/ui/1.10.4/jquery-ui.js»></secuencia de comandos>
Ejemplo 1: En este ejemplo, estableceremos la opción deshabilitada como verdadera. Deshabilitará la ruleta.
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>
$(function () {
$("#gfg").spinner({ disabled: true });
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | spinner disabled Option</h2>
<div id="geeks">
<input type="text" id="gfg" value="12" />
</div>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/spinner/#option-disabled