Spinner小部件在输入框的左侧添加一个向上/向下箭头，从而允许用户递增/递减输入框中的值.它允许用户直接键入值，或通过键盘，鼠标或滚轮旋转来修改现有值.它还具有跳过值的步骤功能.除了基本的数字功能外，它还支持全球化格式化选项(即货币，千位分隔符，小数等)，从而提供方便的国际化屏蔽输入框.
以下示例取决于 Globalize .您可以从 https://github.com/jquery/globalize 获取Globalize文件.单击版本链接，选择所需的版本，然后下载 .zip 或 tar.gz 文件.解压缩文件并将以下文件复制到示例所在的文件夹中.
lib/globalize.js:This file包含用于处理本地化的Javascript代码
lib/globalize.culture.js:此文件包含Globalize库附带的一组完整语言环境.
这些文件也存在于jquery-ui库的 external 文件夹中.
jQueryUI提供了创建微调器的spinner()方法.
spinner()方法可以使用两种形式 :
$(selector, context).spinner (options) 方法
$(selector, context).spinner ("action", params) 方法
spinner(options)方法声明一个HTML元素及其元素内容应作为微调器处理和管理. options 参数是一个对象，它指定所涉及的微调器元素的外观和行为.
$(selector, context).spinner (options);
您可以使用Javascript对象一次提供一个或多个选项.如果要提供多个选项，则使用逗号分隔它们，如下所示;
$(selector, context).spinner({option1: value1, option2: value2..... });下表列出了可与此方法一起使用的不同选项 :
| Sr.No. | 选项&安培;描述 |
|---|---|
| 1 | culture 此选项设置用于解析和格式化值的区域性.默认情况下，其值为 null ，这意味着使用了 Globalize 中当前设置的文化. 选项 - 文化 此选项设置用于解析和格式化值的区域性.默认情况下，其值为 null ，这意味着使用 Globalize 中当前设置的文化.仅在设置了 numberFormat 选项时才相关. 语法
$(".selector").spinner(
{culture:"fr"}
); |
| 2 | disabled 此选项如果设置为 true ，则禁用微调器.默认情况下，其值为 false . 选项 - 已停用 此选项如果设置为 true ，则禁用微调器.默认情况下，其值为 false . 语法
$(".selector").spinner(
{disabled:true}
); |
| 3 | icons 此选项设置用于按钮的图标，与 jQuery UI CSS Framework .默认情况下，其值为 {down:"ui-icon-triangle-1-s"，up:"ui-icon-triangle-1-n"} . 选项 - 图标 此选项设置用于按钮的图标，匹配 jQuery UI CSS Framework .默认情况下，其值为 {down:"ui-icon-triangle-1-s"，up:"ui-icon-triangle-1-n"} . 语法
$(".selector").spinner(
{icons:{ down:"custom-down-icon"，up:"custom-up-icon"}}
); |
| 4 | incremental 此选项控制按住旋转按钮时所执行的步骤数.默认情况下，其值为 true . 选项 - 增量 此选项控制按住旋转按钮时所执行的步骤数.默认情况下，其值为 true . 这可以是 :
语法
$(".selector").spinner(
{incremental:false}
); |
| 5 | max 此选项表示允许的最大值.默认情况下，其值为 null ，这意味着没有最大强制执行. 选项 - 最大 此选项表示允许的最大值.默认情况下，其值为 null ，这意味着没有最大强制执行. 这可以是 :
语法
$ (".selector").spinner(
{max:50}
); |
| 6 | min 此选项表示允许的最小值.默认情况下，其值为 null ，这意味着没有最低强制执行. 选项 - 分钟 此选项表示允许的最小值.默认情况下，其值为 null ，这意味着没有最低强制执行. 这可以是 :
语法
$(".selector").spinner(
{min:0}
); |
| 7 | numberFormat 此选项表示传递给 Globalize 的数字格式(如果有).最常见的是十进制数字的"n"和货币值的"C".默认情况下，其值为 null . 选项 - numberFormat 此选项表示传递给 Globalize 的数字格式(如果有).最常见的是十进制数字的"n"和货币值的"C".默认情况下，其值为 null . 语法
$(".selector").spinner(
{numberFormat:"n"}
); |
| 8 | page 此选项指示通过pageUp/pageDown方法进行分页时要执行的步骤数.默认情况下，其值 10 . 选项 - 页面 此选项指示通过pageUp/pageDown方法进行分页时要执行的步骤数.默认情况下，其值 10 . 语法
$(".selector").spinner(
{page:5}
); |
| 9 | step 此选项表示通过按钮或通过 stepUp()/stepDown()方法旋转时要执行的步骤的大小.如果元素的 step 属性存在且未明确设置该选项，则使用该元素. 选项 - 步骤 此选项表示通过按钮或通过 stepUp()/stepDown()方法旋转时要执行的步骤的大小.如果元素的 step 属性存在且未明确设置该选项，则使用该元素. 这可以是 :
语法
$(".selector").spinner(
{step:2}
); |
以下部分将向您展示微调器窗口小部件功能的一些工作示例.
以下示例演示了微调器窗口小部件功能的简单示例，不将参数传递给 spinner()方法.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type = "text/css">
#spinner-1 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#spinner-1" ).spinner();
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "example">
<input type = "text" id = "spinner-1" value = "0" />
</div>
</body>
</html>让我们将上述代码保存在HTML文件中 spinnerexample.htm 并在支持javascript的标准浏览器中打开它，你还必须看到以下输出.现在，您可以使用结果
以下示例演示了JqueryUI的微调器窗口小部件中三个选项min，max和step的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type = "text/css">
#spinner-2,#spinner-3 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#spinner-2" ).spinner({
min: -10,
max: 10
});
$('#spinner-3').spinner({
step: 100,
min: -1000000,
max: 1000000
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "example">
Spinner Min, Max value set:
<input type = "text" id = "spinner-2" value = "0" /><br><br>
Spinner increments/decrements in step of of 100:
<input type = "text" id = "spinner-3" value = "0" />
</div>
</body>
</html>让我们将上述代码保存在HTML文件spinnerexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果
在上面的示例中，您可以在第一个微调器中看到max和min值分别设置为10和-10。 因此，超过这些值，微调器将停止递增/递减。 在第二个微调器中，微调器值以100为步长递增/递减。
以下示例演示了JqueryUI的微调框小部件中选项图标的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type = "text/css">
#spinner-5 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#spinner-5" ).spinner({
icons: {
down: "custom-down-icon", up: "custom-up-icon"
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "example">
<input type = "text" id = "spinner-5" value = "0" />
</div>
</body>
</html>让我们将上述代码保存在HTML文件spinnerexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果
在上面的示例中，您可以注意到图像微调器已更改。
以下示例演示了JqueryUI的微调器窗口小部件中三个选项culture，numberFormat和page的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src = "/jqueryui/jquery-ui-1.10.4/external/jquery.mousewheel.js"></script>
<script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.js"></script>
<script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.culture.de-DE.js"></script>
<script>
$(function() {
$( "#spinner-4" ).spinner({
culture:"de-DE",
numberFormat:"C",
step:2,
page:10
});
});
</script>
</head>
<body>
<p>
<label for = "spinner-4">Amount to donate:</label>
<input id = "spinner-4" name = "spinner" value = "5">
</p>
</body>
</html>让我们将上述代码保存在HTML文件spinnerexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果
在上面的示例中，您可以看到微调器以货币格式显示数字，因为numberFormat设置为"C"，culture设置为"de-DE"。 这里我们使用了jquery-ui库中的Globalize文件。
spinner ("action", params) 方法可以对微调器元素执行操作，例如启用/禁用微调器。 该操作在第一个参数中指定为字符串（例如，"disable"禁用微调器）。 请查看下表中可以传递的操作。
$(selector, context).spinner ("action", params);;下表列出了可以与此方法一起使用的不同操作
| Sr.No. | Action & Description |
|---|---|
| 1 | destroy 此操作完全破坏元素的微调器功能。 元素返回到pre-init状态。 此方法不接受任何参数。 Action - destroy 此操作完全破坏元素的微调器功能。 元素返回到pre-init状态。 此方法不接受任何参数。 Syntax $(".selector").spinner("destroy"); |
| 2 | disable 此操作会禁用微调器功能。 此方法不接受任何参数。 Action - disable 此操作会禁用微调器功能。 此方法不接受任何参数。 Syntax $(".selector").spinner("disable"); |
| 3 | enable 此操作启用微调器功能。 此方法不接受任何参数。 Action - enable 此操作启用微调器功能。 此方法不接受任何参数。 Syntax $(".selector").spinner("enable"); |
| 4 | option( optionName ) 此操作获取当前与指定的optionName关联的值。 其中optionName是要获取的选项的名称。 Action - option( optionName ) 此操作获取当前与指定的optionName关联的值。 其中optionName是要获取的选项的名称。 Syntax var isDisabled = $( ".selector" ).spinner( "option", "disabled" ); |
| 5 | option 此操作获取一个对象，该对象包含表示当前微调器选项哈希的键/值对。 此方法不接受任何参数。 Action - option 此操作获取一个对象，该对象包含表示当前微调器选项哈希的键/值对。 此方法不接受任何参数。 Syntax var options = $( ".selector" ).spinner( "option" ); |
| 6 | option( optionName, value ) 此操作设置与指定的optionName关联的微调器选项的值。 Action - optionName 此操作设置与指定的optionName关联的微调器选项的值。 Syntax $( ".selector" ).spinner( "option", "disabled", true ); |
| 7 | option( options ) 此操作为微调器设置一个或多个选项。 Action - option( options ) 此操作为微调器设置一个或多个选项。 Syntax $(".selector").spinner("option", { disabled: true }); |
| 8 | pageDown( [pages ] ) 此操作将值减少指定的页数，如页面选项所定义。 Action - pageDown( [pages ] ) 此操作将值减少指定的页数，如页面选项所定义。 调用pageDown()将导致触发start，spin和stop事件。 Syntax $(".selector").spinner("pageDown"); |
| 9 | pageUp( [pages ] ) 此操作将值增加指定的页数，如页面选项所定义。 Action - pageUp( [pages ] ) 此操作将值增加指定的页数，如页面选项所定义。 调用pageUp()将导致触发启动，旋转和停止事件。 Syntax $(".selector").spinner("pageUp"); |
| 10 | stepDown( [steps ] ) 此操作将值减少指定的步数。 Action - stepDown( [steps ] ) 此操作将值减少指定的步数。 调用stepDown()将导致触发start，spin和stop事件。 Syntax $(".selector").spinner("stepDown"); |
| 11 | stepUp( [steps ] ) 此操作将值增加指定的步数 Action - stepUp( [steps ] ) 此操作将值增加指定的步数。 调用stepUp()将导致触发启动，旋转和停止事件。 Syntax $(".selector").spinner("stepUp"); |
| 12 | value 此操作将当前值作为数字。 该值基于numberFormat和culture选项进行解析。 此方法不接受任何参数。 Action - value 此操作将当前值作为数字。 该值基于numberFormat和culture选项进行解析。 此方法不接受任何参数。 Syntax var value = $( ".selector" ).spinner( "value" ); |
| 13 | value( value ) 此操作设置值。 如果传递了值，则根据numberFormat和culture选项解析值。 Action - value( value ) 此操作设置值。 如果传递了值，则根据numberFormat和culture选项解析值。 Syntax $( ".selector" ).spinner( "value", 50 ); |
| 14 | widget 此操作返回微调框小部件元素; 用ui-spinner类名注释的那个。 Action - widget 此操作返回微调框小部件元素; 用ui-spinner类名注释的那个。 Syntax $( ".selector" ).spinner( "widget"); |
以下示例演示了如何使用上表中给出的操作。
以下示例演示了stepUp，stepDown，pageUp和pageDown方法的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type = "text/css">
#spinner-6 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$("#spinner-6").spinner();
$('button').button();
$('#stepUp-2').click(function () {
$("#spinner-6").spinner("stepUp");
});
$('#stepDown-2').click(function () {
$("#spinner-6").spinner("stepDown");
});
$('#pageUp-2').click(function () {
$("#spinner-6").spinner("pageUp");
});
$('#pageDown-2').click(function () {
$("#spinner-6").spinner("pageDown");
});
});
</script>
</head>
<body>
<!-- HTML -->
<input id = "spinner-6" />
<br/>
<button id = "stepUp-2">Increment</button>
<button id = "stepDown-2">Decrement</button>
<button id = "pageUp-2">Increment Page</button>
<button id = "pageDown-2">Decrement Page</button>
</body>
</html>让我们将上面的代码保存在HTML文件spinnerexample.htm中，并在支持javascript的标准浏览器中打开它，你还必须看到以下输出
在上面的示例中，使用相应的按钮递增/递减微调器。
以下示例演示了启用和禁用方法的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type = "text/css">
#spinner-7 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$("#spinner-7").spinner();
$('button').button();
$('#stepUp-3').click(function () {
$("#spinner-7").spinner("enable");
});
$('#stepDown-3').click(function () {
$("#spinner-7").spinner("disable");
});
});
</script>
</head>
<body>
<!-- HTML -->
<input id = "spinner-7" />
<br/>
<button id = "stepUp-3">Enable</button>
<button id = "stepDown-3">Disable</button>
</body>
</html>让我们将上面的代码保存在HTML文件spinnerexample.htm中，并在支持javascript的标准浏览器中打开它，你还必须看到以下输出
在上面的示例中，使用"启用/禁用"按钮启用或禁用微调器。
除了我们在前面几节中看到的spinner（options）方法之外，JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下所列
| Sr.No. | Event Method & Description |
|---|---|
| 1 | change(event, ui) 微调器的值已更改且输入不再聚焦时，将触发此事件。 Event - change(event, ui) 微调器的值已更改且输入不再聚焦时，将触发此事件。 其中event是Event类型，ui是Object类型。 Syntax $( ".selector" ).spinner({
change: function( event, ui ) {}
}); |
| 2 | create(event, ui) 创建微调器时会触发此事件。 Event - create(event, ui) 创建微调器时会触发此事件。 其中event是Event类型，ui是Object类型。 Syntax $( ".selector" ).spinner({
create: function( event, ui ) {}
}); |
| 3 | spin(event, ui) 在递增/递减期间触发此事件。 Event - spin(event, ui) 在递增/递减期间触发此事件。 其中event是Event类型，ui是Object类型。并表示要设置的新值，除非事件被取消。 Syntax $( ".selector" ).spinner({
spin: function( event, ui ) {}
}); |
| 4 | start(event, ui) 在旋转之前触发此事件。 可以取消，防止旋转发生。 Event - start(event, ui) 在旋转之前触发此事件。 可以取消，防止旋转发生。 其中event是Event类型，ui是Object类型。 Syntax $( ".selector" ).spinner({
start: function( event, ui ) {}
}); |
| 5 | stop(event, ui) 旋转后会触发此事件。 Event - stop(event, ui) 旋转后会触发此事件。 其中event是Event类型，ui是Object类型。 Syntax $( ".selector" ).spinner({
stop: function( event, ui ) {}
}); |
以下示例演示了微调器窗口小部件中的事件方法用法。 此示例演示了事件旋转，更改和停止的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type = "text/css">
#spinner-8 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#spinner-8" ).spinner({
spin: function( event, ui ) {
var result = $( "#result-2" );
result.append( "Spin Value: "+$( "#spinner-8" ).spinner("value") );
},
change: function( event, ui ) {
var result = $( "#result-2" );
result.append( "Change value: "+$( "#spinner-8" ).spinner("value") );
},
stop: function( event, ui ) {
var result = $( "#result-2" );
result.append( "Stop value: "+$( "#spinner-8" ).spinner("value") );
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "example">
<input type = "text" id = "spinner-8" value = "0" />
</div>
<span id = "result-2"></span>
</body>
</html>让我们将上面的代码保存在HTML文件spinnerexample.htm中，并在支持javascript的标准浏览器中打开它，你还必须看到以下输出
在上面的示例中，更改微调器的值，并查看下面显示的用于旋转和停止事件的消息。 现在更改微调器的焦点，您会看到更改事件上显示的消息。
微调器窗口小部件是使用窗口小部件工厂构建的，可以进行扩展。 要扩展小部件，我们可以覆盖或添加现有方法的行为。 以下方法提供了与spinner方法具有相同API稳定性的扩展点。
| Sr.No. | Method & Description |
|---|---|
| 1 | _buttonHtml(event) 此方法返回一个HTML，它是一个HTML。 此HTML可用于微调器的递增和递减按钮。 必须为每个按钮指定一个ui-spinner-button类名，以使相关事件起作用。 此方法不接受任何参数。 Extension Point - _buttonHtml(event, ui) 此方法返回一个HTML，它是一个HTML。 此HTML可用于微调器的递增和递减按钮。 必须为每个按钮指定一个ui-spinner-button类名，以使相关事件起作用。 此方法不接受任何参数。 Code Example _buttonHtml: function() {
return "" +
"" +
"▲" +
"" +
"" +
"▼" +
"";
} |
| 2 | _uiSpinnerHtml(event) 此方法确定用于包装微调器的<input>元素的HTML。 此方法不接受任何参数。 Extension Point - _uiSpinnerHtml(event, ui) 此方法确定用于包装微调器的<input>元素的HTML。 此方法不接受任何参数。 Code Example _uiSpinnerHtml: function() {
return "";
} |
jQuery UI Widget Factory是一个可扩展的基础，可以在其上构建所有jQuery UI的小部件。 使用小部件工厂构建插件为状态管理提供了便利，也为常见任务提供了约定，例如公开插件方法和在实例化后更改选项。
