jQuery UI 实例 - 旋转器(Spinner)
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 旋转器,包括其选项、事件和方法。你可以根据需要自定义设置来调整旋转器的行为和外观。该控件易于使用,可以方便地用于各种应用场景。