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 la flecha hacia arriba y hacia abajo. En este artículo, veremos cómo usar el método stepUp() en el control deslizante jQuery UI. El método stepUp() se usa para aumentar el valor del paso con un número dado de pasos en jQuery UI spinner. Este método puede invocar tres eventos start, stop y spin.
Sintaxis:
$(".selector").spinner("stepUp", steps);
Parámetros: este método acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- pasos: este parámetro contiene el número de pasos a incrementar.
Enlace CDN:
<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, aumentamos el valor del paso por el número dado de pasos, en cada paso el valor se incrementa en 1.
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();
$('button').button();
$('#gfg1').click(function () {
$("#gfg").spinner("stepUp");
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | spinner stepUp method</h2>
<input id = "gfg" />
<br/>
<button id = "gfg1">+1</button>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/1.11/spinner/#method-stepUp