Spinner en jQuery UI se usa para aumentar o disminuir el valor usando las teclas de flecha o los botones arriba/abajo. Este control giratorio se utiliza para entradas numéricas.
Usaremos el enlace CDN en el código para agregar diferentes bibliotecas y estilos. Para mostrar este Calendario como cualquier otro widget de jQuery UI, tenemos que vincular a jQuery y jQuery UI. Aquí hay un código simple con todas las etiquetas HTML para mostrar una rueda giratoria. Simplemente puede copiar este código para mostrar la rueda giratoria.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
jQuery UI | Spinner to select numeric data
</title>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/
themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery UI | Spinner to
select numeric data
</h3>
<input id="spinner" size=3 value=17>
<script>
$(document).ready(function() {
$( "#spinner" ).spinner();
});
</script>
</body>
</html>
Producción:
Valor predeterminado: se utiliza para establecer el valor predeterminado en el cuadro de entrada.
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
jQuery UI | Spinner to select numeric data
</title>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/
themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery UI | Spinner to
select numeric data
</h3>
<input id="spinner" size=3>
<script>
$(document).ready(function() {
$( "#spinner" ).spinner();
$( "#spinner" ).val(500)
});
</script>
</body>
</html>
Producción:
Valor máximo y mínimo: se pueden establecer los límites superior e inferior para el girador.
<script>
$(document).ready(function() {
$( "#spinner" ).spinner({
max: 20,
min: -10
});
});
</script>
Valor de la página: podemos establecer el valor del botón de la tecla Página arriba o Página abajo usando el valor de la página.
<script>
$(document).ready(function() {
$( "#spinner" ).spinner({
page:50
});
});
</script>
Valor de paso: podemos establecer el valor del botón de la tecla de flecha hacia arriba o hacia abajo usando el paso.
<script>
$(document).ready(function() {
$( "#spinner" ).spinner({
step:10
});
});
</script>
Publicación traducida automáticamente
Artículo escrito por mayeshmohapatra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA