Latest web development tutorials

jQuery UI API - rotator member (Spinner Widget)

category

Widgets (Widgets)

usage

Description: The up / down arrow buttons and key processing, the input value enhanced text input functions.

New version: 1.9

Rotator (Spinner), or control the number of steps (number stepper widget), is used to process various digital inputs perfect control. It allows the user to enter a value directly, or rotate to change an existing value through the keyboard, the mouse wheel. When combined with globalization (Globalize), you can even rotate the display currency and dates in different regions.

Rotator (Spinner) using the two buttons to enter text coverage for increment and decrement the current value. Rotator adds key events so that you can use the keyboard to perform the same increment and decrement. Rotator representative of Globalization (Globalize) digital format and resolution.

Keyboard interaction

  • UP: to increase the value one step.
  • DOWN: to reduce the value step.
  • PAGE UP: to increase a value.
  • PAGE DOWN: to decrease a value.

Click on the rotation button with the mouse, the focus remains in the text field.

When the rotator is not read ( <input readonly> ), the user can enter a value, which may result in an invalid value (less than the minimum, greater than the maximum, increase or decrease mismatch, non-numeric input). When the increase or decrease, either programmatically or by way of the rotary button, the value will be forced to a valid value (For more information, please see stepUp() and stepDown() will be described.

Theming

Rotator member (Spinner Widget) using jQuery UI CSS framework to define the look and feel of its style. If you need to use the specified style spinner, you can use the following CSS class name:

  • ui-spinner : rotator outer container.
    • ui-spinner-input : rotator member (Spinner Widget) instantiated <input> elements.
    • ui-spinner-button : rotator is used to increment or decrement the value of the button control. Up button will additionally be provided with a ui-spinner-up , class, down a button with additional ui-spinner-down , class.

rely

Additional information

  • The part requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget specified CSS file as a starting point.
  • The components to programmatically manipulate the value of the element, so that when the value of the element changes do not trigger the native change events.
  • It does not support <input type="number"> Create selector, because it will cause a conflict with the local UI rotator.

Examples

Common digital selector. 

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> rotator member (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>
<Body>
 
<Input id = "spinner">
 
<Script>
$ ( "#spinner") .spinner ();
</ Script>
 
</ Body>
</ Html>