jQuery UI 实例 - 旋转器（Spinner）

介绍

jQuery UI 旋转器（Spinner）是一个用户界面控件，允许用户通过增加或减少数字来选择一个特定的值。旋转器可以用于许多应用程序，例如调整时间、日期、数量或者价格等。

使用方法

首先，需要将 jQuery UI 库添加到 HTML 文件中。可以通过 CDN 或者下载 jQuery UI 库并将其链接到 HTML 文件中：

<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

创建一个 HTML 元素并为其添加一个 ID。该 ID 将被用于初始化旋转器。例如：

<input type="text" id="spinner">

在 JavaScript 文件中初始化这个旋转器。可以使用以下代码:

$( function() {
  $( "#spinner" ).spinner();
} );

这时旋转器已经可以使用了。默认情况下，它会使用整数值，但是你可以通过以下方法来更改其设置：

$( function() {
  $( "#spinner" ).spinner({
    step: 0.01, // 步长为 0.01
    min: 0, // 最小值为 0
    max: 100, // 最大值为 100
    numberFormat: "C" // 数字格式为货币 C (例如 $1.00)
  });
} );

选项

以下是一些常用选项：

step：确定增加或减少的值。默认是 1。
min：最小值。默认是 null。
max：最大值。默认是 null。
incremental：确定按上下箭头键时数字的增加量是否随着按键的次数而增加。默认是 true。
numberFormat：数字格式。默认是 null。

事件

以下是一些常用事件：

create：当旋转器被创建时触发。
start：在控制旋转器时按下按钮时触发。
spin：当按钮被按下并且数字已经更改时触发。
stop：释放按钮时触发。

方法

以下是一些常用方法：

spinner("value", newValue)：将旋转器的当前值设置为 newValue。
spinner("destroy")：销毁旋转器。
spinner("disable")：禁用旋转器。
spinner("enable")：启用旋转器。

小结

本文简要介绍了如何使用 jQuery UI 旋转器，包括其选项、事件和方法。你可以根据需要自定义设置来调整旋转器的行为和外观。该控件易于使用，可以方便地用于各种应用场景。

jQuery UI 实例 - 放置（Droppable） jQuery UI 实例 - 日期选择器（Datepicker）