jQuery UI API - Widget Spinner (Spinner Widget)

Categoría

Widgets

Uso

Descripción:Mejora la entrada de texto para valores numéricos mediante botones arriba/abajo y teclas de flecha.

Nuevo en la versión:1.9

El Spinner, o control de paso numérico (number stepper widget), es el control perfecto para manejar varias entradas numéricas. Permite al usuario ingresar un valor directamente, o cambiar un valor existente girando con el teclado, el ratón o la rueda del ratón. Cuando se combina con Globalize, incluso puede girar para mostrar monedas y fechas de diferentes regiones.

El Spinner utiliza dos botones para superponer a la entrada de texto los valores incrementado y decrementado del valor actual. El Spinner añade eventos de teclado para que el mismo incremento y decremento se pueda realizar con el teclado. El spinner representaGlobalizeel formato y análisis de números.

Interacción con teclado

  • ARRIBA: Aumenta el valor en un paso.
  • ABAJO: Disminuye el valor en un paso.
  • PAGE UP: Aumenta el valor en una página.
  • PAGE DOWN: Disminuye el valor en una página.

Después de hacer clic con el ratón en los botones de giro, el foco permanece en el campo de texto.

Cuando el spinner no es de solo lectura (<input readonly>), el usuario puede ingresar valores, lo que puede producir valores inválidos (menores que el mínimo, mayores que el máximo, incrementos/decrementos incorrectos, entradas no numéricas). Al incrementar o decrementar, ya sea mediante programación o mediante los botones de giro, el valor se fuerza a un valor válido (para más detalles, consultestepUp()ystepDown()la descripción.

Tematización

El widget Spinner utilizajQuery UI CSS Frameworkpara definir el estilo de su apariencia y sensación. Si necesita usar estilos específicos del spinner, puede utilizar los siguientes nombres de clase CSS:

  • ui-spinner: El contenedor exterior del spinner.
    • ui-spinner-input: El elemento donde se instancia el widget Spinner<input>elemento.
    • ui-spinner-button: Controles de botón para incrementar o decrementar el valor del spinner. El botón hacia arriba también lleva unui-spinner-upclass, y el botón hacia abajo también lleva unui-spinner-down class.

Dependencias

Notas adicionales

  • Este widget requiere algo de CSS funcional; de lo contrario, no funcionará. Si crea un tema personalizado, utilice el archivo CSS específico del widget como punto de partida.
  • Este widget manipula el valor del elemento mediante programación, por lo que cuando el valor del elemento cambia no se dispara el nativochangeevento.
  • No se admite en<input type="number">crear selectores, porque causaría conflicto con la interfaz del spinner nativo.

Ejemplos

Selector de números normal.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>旋转器部件（Spinner Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<input id="spinner">
 
<script>
$( "#spinner" ).spinner();
</script>
 
</body>
</html>

Otras extensiones