Latest web development tutorials

jQuery UI API - elemento rotatorio (Spinner Widget)

categoría

Los widgets (widgets)

uso

Descripción: Los de arriba / abajo teclas de flecha y procesamiento de clave, las funciones de entrada de texto mejora del valor de entrada.

Nueva versión: 1.9

Rotador (Spinner), o controlar el número de pasos (número widget de paso a paso), se utiliza para procesar varias entradas digitales de control perfecto. Permite al usuario introducir un valor directamente, o girar para cambiar un valor existente a través del teclado, la rueda del ratón. Cuando se combina con la globalización (Globalize), incluso se puede girar la moneda de visualización y las fechas en las diferentes regiones.

Rotador (Spinner) usando los dos botones para entrar en la cobertura de texto para incrementar y disminuir el valor actual. Rotador agrega eventos clave para que pueda utilizar el teclado para realizar el mismo incremento y decremento. Rotador representante de la globalización (Globalize) formato digital y resolución.

interacción con el teclado

  • UP: para aumentar el valor paso a paso.
  • ABAJO: para reducir el valor paso.
  • PÁG: aumentar un valor.
  • PÁG: para disminuir un valor.

Haga clic en el botón de rotación con el ratón, el foco permanece en el campo de texto.

Cuando el rotador no se lee ( <input readonly> ), el usuario puede introducir un valor, que puede resultar en un valor no válido (menos que el mínimo, mayor que el máximo, aumentar o disminuir falta de coincidencia, la entrada no numérico). Cuando el aumento o disminución, mediante programación o por medio del botón giratorio, el valor se verán obligados a un valor válido (Para obtener más información, consulte stepUp() y el stepDown() se describirá.

tematización

elemento rotatorio (Spinner Widget) usando framework jQuery UI CSS para definir la apariencia de su estilo. Si necesita utilizar el controlador estilo especificado, puede utilizar el siguiente nombre de clase CSS:

  • ui-spinner : rotador recipiente exterior.
    • ui-spinner-input : elemento rotatorio (spinner Widget) instanciado <input> elementos.
    • ui-spinner-button : rotador se utiliza para aumentar o disminuir el valor del control de botón. Hasta botón, además, estar provisto de una ui-spinner-up , clase, presionado un botón adicional con ui-spinner-down , clase.

confiar

información adicional

  • La parte funcional requiere un poco de CSS, de lo contrario no funcionará. Si crea un tema personalizado, utilice el archivo CSS widget de especificado como un punto de partida.
  • Los componentes para manipular mediante programación el valor del elemento, de modo que cuando el valor de los cambios de elementos no desencadenan la nativas change eventos.
  • No es compatible con <input type="number"> Crear selector, porque va a causar un conflicto con el rotador interfaz de usuario local.

Ejemplos

selector digital común. 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> elemento rotatorio (Spinner Widget) Demo </ 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>
<Cuerpo>
 
<Entrada id = "spinner">
 
<Script>
$ ( "#spinner") .spinner ();
</ Script>
 
</ Body>
</ Html>