jQuery UI Spinner 最小选项

jQuery UI Spinner 是一个自定义样式的 input 元素，可增加或减少其数字值。在这里，我们将介绍 Spinner 的最小选项。

使用

首先，需要引入 jQuery、jQuery UI 和 Spinner 的 CSS 和 JS 文件。这可以通过以下方式完成：

<!-- jQuery UI css -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!-- jQuery and jQuery UI js -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<!-- Spinner css and js -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-spinner/1.6.0/jquery.ui.spinner.min.js"></script>

然后，创建一个 input 元素并为其添加 Spinner：

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

$("#spinner").spinner();

现在，您应该看到一个具有增加和减少按钮的 input 元素。

选项

Spinner 有许多选项，可以通过设置属性来自定义。

下面是一些最小选项：

1. min

   min 选项指定允许的最小值。默认值为 null。

   $("#spinner").spinner({
     min: 1
   });
   

2. max

   max 选项指定允许的最大值。默认值为 null。

   $("#spinner").spinner({
     max: 10
   });
   

3. step

   step 选项指定增加或减少的数字值。默认值为 1。

   $("#spinner").spinner({
     step: 0.5
   });
   

4. start

   start 选项指定 Spinner 起始的数字值。默认值为 0。

   $("#spinner").spinner({
       start: 3
   });
   

事件

Spinner 也有可用的事件，可以根据需要使用。

以下是一些最小选项：

1. spinstop

   spinstop 事件在增加或减少的数字值停止时触发。

   $("#spinner").on( "spinstop", function( event, ui ) {
       alert("New value: " + ui.value);
   });
   

2. spinchange

   spinchange 事件在值更改时触发。

   $("#spinner").on("spinchange", function(event, ui) {
       console.log("New value is: " + ui.value);
   });
   

结论

以上是 jQuery UI Spinner 的最小选项及其使用方法。使用这些选项和事件，您可以自定义 Spinner 以满足您的需求。