jQuery Spinner旋转器组件的用法（附带实例）

旋转器（Spinner）的主要作用是通过向上或者向下按钮和箭头键，为输入值增强文本输入功能。它允许用户直接输入一个值，或通过键盘、鼠标旋转改变一个已有的值。当旋转器与全球化（Globalize）结合时，用户甚至可以旋转显示不同地区的货币和日期。

旋转器使用两个按钮将文本输入覆盖为当前值的递增值和递减值。旋转器增加了按键事件，以便用户可以用键盘完成相同的递增和递减。

旋转器部件（Spinner Widget）使用 jQuery UI CSS 框架来定义它的外观和感观的样式。如果需要使用旋转器指定的样式，则可以使用如下 CSS class 名称：

ui-spinner：旋转器的外层容器；
ui-spinner-input：旋转器部件实例化的 <input> 元素；
ui-spinner-button：用于递增或递减旋转器值的按钮控件。向上按钮会额外带有一个 CSS class 名称 ui-spinner-up，向下按钮会额外带有一个 CSS class 名称 ui-spinner-down。

jQuery UI 不支持在 <input type="number"> 上创建选择器，因为这样会造成与本地旋转器的 UI 冲突。

【实例】本实例制作一个捐款表格，用户可以选择捐款币种和设置捐款额，其中设置捐款额使用旋转器实现。程序开发步骤如下：

新建一个 index.html 文件;
将 jQuery UI 文件夹 jquery-ui-1.13.2.custom 和 index.html 放置在一起；
使用 VS Code 打开 index.html 文件，在 index.html 文件中编写如下代码，实现通过旋转器设置捐款额的功能：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
<title>旋转器（Spinner）的使用</title>
<script>
$(function() {
    $("#spinner").spinner({
        min: 10,
        max: 2500,
        step: 10,
        start: 1000,
        numberFormat: "C"
    });
});
</script>
</head>
<body>
<p>
    <label for="currency">选择捐款币种：</label>
    <select id="currency" name="currency">
        <option value="en-US">美元 $</option>
        <option value="zh-CN">人民币 ¥</option>
    </select>
</p>
<p>
    <label for="spinner">设置捐款额：</label>
    <input id="spinner" name="spinner" value="10">
</p>
</body>
</html>

使用 Chrome 浏览器运行 index.html 文件，单击捐款额旋转器后面的向上或者向下按钮，可以设置捐款额，效果如下图所示。

图 1 旋转器的应用实例

jQuery Spinner旋转器组件的用法（附带实例）

相关文章