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