srcmini本文概述
jQuery UI旋转器小部件用于在输入框中添加向上/向下箭头, 从而允许用户增大和减小输入框中的值。它使用户可以直接键入值, 或通过使用键盘, 鼠标或滚轮旋转来修改现有值。
它还具有一些扩展功能, 例如：
- 它有助于你跳过值。
- 它还启用了全球化的格式设置选项（即货币, 小数, 千位分隔符等）
句法：
你可以使用两种形式的spinner()方法：
$(selector, context).spinner (options) Method$(selector, context).spinner ("action", params) Method第一种方法
$(selector, context).spinner (options)spinner（options）方法指定应将HTML元素及其内容视为Spinner对待和管理。在这里？选项？参数是一个对象, 用于指定所涉及的微调器元素的外观和行为。
你可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项, 则必须使用逗号将它们分开, 如下所示：
$(selector, context).spinner ({option1: value1, option2: value2.....});以下是可与该方法一起使用的不同选项的列表：
| 选项 | 描述 |
|---|---|
| culture | 此选项设置区域性以用于解析和格式化值。默认情况下, 其值为null, 这表示使用当前设置的globalize。 |
| disabled | 如果将此选项设置为true, 它将禁用微调器。默认情况下, 其值为false。 |
| icons | 此选项用于设置用于按钮的图标, 与jQueryUI CSS框架提供的图标匹配。默认情况下, 其值为{down：“ ui-icon-triangle-1-s”, up：“ ui-icon-triangle-1-n”}。 |
| incremental | 此选项控制按住旋转按钮时采取的步骤数。默认情况下, 其值为true。 |
| max | 此选项用于标识最大允许值。默认情况下, 它的值为null, 这意味着没有最大强制执行。 |
| min | 此选项用于标识最小允许值。默认情况下, 其值为null, 这意味着没有最低强制要求。 |
| numberFormat | 此选项指定传递给全球化的数字的格式（如果有）。最常见的是“ n”代表十进制数字, “ c”代表货币值。默认情况下, 其值为null。 |
| page | 此选项指示通过pageup / pagedown方法进行分页时要采取的步骤数。默认情况下, 其值为10。 |
| step | 此选项指定通过按钮或通过stepup()/ stepdown()方法旋转时要采取的步骤的大小。如果元素的step属性存在并且未明确设置选项, 则使用该属性。 |
jQuery UI Spinner示例1
在spinner()方法没有参数的情况下：
让我们以一个简单的示例来演示Spinner小部件功能, 不将任何参数传递给spinner()方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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>立即测试
jQuery UI Spinner示例2
使用最小, 最大和步进选项：
让我们以一个示例来演示jQueryUI的微调小部件中选项min, max和step的用法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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: -50, max: 50
});
$('#spinner-3').spinner({
step: 1000, 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 1000:
<input type="text" id="spinner-3" value="0" />
</div>
</body>
</html>立即测试
第二种方法
$(selector, context).spinner ("action", params)微调器（“操作”, 参数）方法用于对微调器元素执行操作, 例如启用/禁用微调器。该操作在第一个参数中指定为字符串（例如, “ disable”禁用微调器）。
以下是可与该方法一起使用的不同操作的列表：
| 行动 | 描述 |
|---|---|
| destroy | 此操作用于完全破坏元素的微调器功能, 并且元素返回其初始状态。此方法不接受任何参数。 |
| disable | 此操作用于禁用微调器功能。此方法不接受任何参数。 |
| enable | 此操作用于启用微调功能。此方法不接受任何参数。 |
| option( optionName ) | 此操作获取当前与指定的optionName关联的值。这里的optionName是要获取的选项的名称。 |
| option | 此操作将获取一个对象, 该对象包含表示当前微调器选项哈希的键/值对。此方法不接受任何参数。 |
| option(optionName, value) | 此操作设置与指定的optionName关联的微调器选项的值。 |
| option(options) | 此操作为微调器设置一个或多个选项。 |
| pageDown( [pages ] ) | 此操作将值减小指定的页数（如page选项所定义）。 |
| pageUp( [pages ] ) | 此操作将按页面选项的定义将值增加指定的页面数。 |
| stepDown( [steps ] ) | 此操作用于将值减少指定的步数。 |
| stepUp( [steps ] ) | 此操作将值增加指定的步数。 |
| value | 该操作将当前值作为数字获取。该值基于numberFormat和区域性选项进行解析。此方法不接受任何参数。 |
| value(value) | 此操作用于设置值。 |
| widget | 此操作用于返回微调小部件元素；一个带有UI旋转器类名称的注释。 |
jQueryUI spinner()示例3
使用stepUp, stepDown, pageUp和pageDown：
让我们以一个示例来演示stepUp, stepDown, pageUp和pageDown方法的用法：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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>立即测试
jQueryUI spinner()示例4
使用动作启用和禁用：
让我们以一个示例来演示动作启用和禁用的用法：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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>立即测试
评论前必须登录！
注册