jQuery UI consta de widgets 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 la flecha hacia arriba y hacia abajo. En este artículo, veremos cómo usar el evento de cambio en el control deslizante de jQuery UI. El evento de cambio se activa cuando el valor del control giratorio ha cambiado y la entrada ya no se enfoca en el control giratorio jQuery UI.
Sintaxis:
$( ".selector" ).spinner({
change: function( event, ui ) {}
});
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>
El siguiente ejemplo ilustra el evento de cambio de jQuery UI Spinner:
Ejemplo:
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>
<style type="text/css">
#gfg input {
width: 100px;
}
</style>
<script>
$(function () {
$("#gfg").spinner({
change: function (event, ui) {
console.log("change has occurred");
},
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | spinner change event</h2>
<input id="gfg" />
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/spinner/#event-change