📅 最后修改于: 2020-11-27 02:03:21 🧑 作者: Mango
jQuery UI旋转器小部件用于在输入框中添加向上/向下箭头，从而允许用户增加和减小输入框中的值。它使用户可以直接键入值，或通过使用键盘，鼠标或滚轮旋转来修改现有值。
它还具有一些扩展功能，例如：
句法：
您可以使用两种形式的spinner()方法：
$(selector, context).spinner (options) Method
$(selector, context).spinner ("action", params) Method
$(selector, context).spinner (options)
spinner(options)方法指定应将HTML元素及其内容视为Spinner对待和管理。在这里?选项?参数是一个对象，用于指定所涉及的微调器元素的外观和行为。
您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示：
$(selector, context).spinner ({option1: value1, option2: value2.....});
以下是可与该方法一起使用的不同选项的列表：
| Option | Description |
|---|---|
| culture | This option sets the culture to use for parsing and formatting the value. By default its value is null which means the currently set culture in globalize is used. |
| disabled | If you set this option to true, it disables spinner. By default its value is false. |
| icons | This option is used to set icons to use for buttons, matching an icon provided by the jQueryUI CSS framework. By default its value is { down: “ui-icon-triangle-1-s”, up: “ui-icon-triangle-1-n” } . |
| incremental | This option controls the number of steps taken when holding down a spin button. By default its value is true. |
| max | This option is used to identify the maximum allowed value. By default its value is null which means there is no maximum enforced. |
| min | This option is used to identify the minimum allowed value. By default its value is null which means there is no minimum enforced. |
| numberFormat | This option specifies a format of numbers passed to globalize, if available. Most common are “n” for a decimal number and “c” for a currency value. By default its value is null. |
| page | This option indicates the number of steps to take when paging via the pageup/pagedown methods. By default its value is 10. |
| step | This option specifies the size of the step to take when spinning via buttons or via the stepup()/stepdown() methods. The element’s step attribute is used if it exists and the option is not explicitly set. |
没有参数spinner()方法：
让我们以一个简单的示例来演示Spinner小部件功能，不将任何参数传递给spinner()方法。
jQuery UI Spinner functionality
使用最小，最大和步进选项：
让我们以一个示例来说明jQueryUI的微调小部件中选项min，max和step的用法。
jQuery UI Spinner functionality
Spinner Min, Max value set:
Spinner increments/decrements in step of of 1000:
$(selector, context).spinner ("action", params)
微调器(“操作”，参数)方法用于对微调器元素执行操作，例如启用/禁用微调器。该动作在第一个参数中指定为字符串(例如，“ disable”禁用微调器)。
以下是可与该方法一起使用的不同操作的列表：
| Action | Description |
|---|---|
| destroy | This action is used to destroy the spinner functionality of an element completely and the elements return to their pre-init state. This method does not accept any arguments. |
| disable | This action is used to disable the spinner functionality. This method does not accept any arguments. |
| enable | This action is used to enable the spinner functionality. This method does not accept any arguments. |
| option( optionName ) | This action gets the value currently associated with the specified optionName. Here optionName is the name of the option to get. |
| option | This action gets an object containing key/value pairs representing the current spinner options hash. This method does not accept any arguments. |
| option(optionName, value) | This action sets the value of the spinner option associated with the specified optionName. |
| option(options) | this action sets one or more options for the spinner. |
| pageDown( [pages ] ) | This action decrements the value by the specified number of pages, as defined by the page option. |
| pageUp( [pages ] ) | This action increments the value by the specified number of pages, as defined by the page option. |
| stepDown( [steps ] ) | This action is used to decrement the value by the specified number of steps. |
| stepUp( [steps ] ) | This action increments the value by the specified number of steps. |
| value | This action gets the current value as a number. The value is parsed based on the numberFormat and culture options. This method does not accept any arguments. |
| value(value) | This action is used to set the value. |
| widget | This action is used to return the spinner widget element; the one annotated with the UI-spinner class name. |
使用stepUp，stepDown，pageUp和pageDown：
让我们以一个示例来演示stepUp，stepDown，pageUp和pageDown方法的用法：
jQuery UI Spinner functionality
使用动作启用和禁用：
让我们以一个示例来演示动作启用和禁用的用法：
jQuery UI Spinner functionality