jQuery UI Spinner widget() 方法

jQuery UI Spinner 是 jQuery UI 提供的一个小部件，可以通过增加或减少输入框中的值来实现数字的调整。这个小部件常常被用在购物车，计量器等领域。

如何使用 jQuery UI Spinner

引入 jQuery UI 和 Spinner 文件

在使用 jQuery UI Spinner 之前，需要先引入 jQuery UI 和 Spinner 文件。可以直接下载库文件到本地，也可以通过 CDN 的方式引入：

<!-- 引入 jQuery UI 和 Spinner 文件（CDN 方式） -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

创建一个 Spinner

要创建一个 Spinner，需要给一个 input 输入框加上一些特定的配置。例如，以下代码段创建了一个最小值为 0，最大值为 100，步长为 10 的 Spinner。

<input id="spinner" value="0" min="0" max="100" step="10">

然后再通过以下 JavaScript 代码将该输入框转换为 Spinner：

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

注意：在使用 jQuery UI Spinner 之前，确保已引入 jQuery 和 jQuery UI 库。

配置

可以通过配置选项来定制 jQuery UI Spinner，在创建 Spinner 时传入以下选项：

• culture：用于本地化 Spinner。
• disabled：控制 Spinner 是否禁用。
• icons：用于定制调整按钮的图标，如：{ down: "custom-down-icon", up: "custom-up-icon" }。
• incremental：控制鼠标或方向键的输入如何判断 Spinner 的增量设置。
• max：控制 Spinner 的最大值。
• min：控制 Spinner 的最小值。
• numberFormat：用于格式化 Spinner 中的数字。
• page：控制点击 pageup 或 pagedown 按钮时加上/减去的值。
• step：控制 Spinner 数字的增减步长。
• spin：定义一个回调函数，当操作 Spinner 时调用。

示例

以下示例将演示如何使用 jQuery UI Spinner。

HTML

Amount: <input id="spinner" name="spinner" value="0" step="25" min="0" max="200">

JavaScript

$(function() {
  $('#spinner').spinner({
    spin: function(event, ui) {
      if (ui.value > 200) {
        $(this).spinner('value', 0);
        return false;
      } else if (ui.value < 0) {
        $(this).spinner('value', 200);
        return false;
      }
    }
  });
});

解释说明

• 创建了一个名为 "spinner" 的输入框。
• 通过 JavaScript 将 "spinner" 转换为 Spinner。
• 设置 "spinner" 的最小值为 0，最大值为 200，步进为 25。
• 定义了一个回调函数，当用户将 Spinner 的值增加或减少时会调用该函数。
• 如果值高于 200，回调函数会将该值重设为 0。
• 如果值低于 0，回调函数会将该值重设为 200。