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 jQuery UI 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 de paso en el control deslizante de jQuery UI. La opción de paso se usa para indicar la cantidad de pasos que se deben tomar en el control giratorio de jQuery UI. Por defecto, el valor es 1.
Sintaxis:
$( ".selector" ).spinner(
{ step : number | 'string'}
);
Parámetros: esta opción acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- número: Este tamaño de parámetro del paso.
- string: este parámetro se analizará en función de las opciones numberFormat y cultural; de lo contrario, recurrirá al método nativo parseFloat().
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 de la ruleta en 50 en cada paso.
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(
{step: 50}
);
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | spinner step option</h2>
<div id = "geeks">
<input type = "text" id = "gfg" value = "45" />
</div>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/1.11/spinner/#option-step