jQuery UI Spinner
jQuery UI Spinner
jQuery UI Spinner小部件用于在输入框中添加向上/向下箭头，从而允许用户增大和减小输入框中的值。它使用户可以直接键入值，或通过使用键盘，鼠标或滚轮旋转来修改现有值。
它还具有一些扩展功能，例如:
它有助于跳过值。
它还启用了全球化的格式设置选项(即货币，小数，千位分隔符等)
语法:
您可以以两种形式使用spinner()方法:
$(selector, context).spinner (options)
$(selector, context).spinner ("action", params)
第一种方法
$(selector, context).spinner (options)
spinner(选项)方法指定应将HTML元素及其内容视为spinner。options参数是一个对象，用于指定所涉及的微调器元素的外观和行为。
您可以使用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
使用min, max 和 step选项:
让我们以一个示例进行演示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)
spinner("action", params)方法用于对旋转器元素执行操作，例如启用/禁用旋转器。该操作在第一个参数中指定为字符串(例如，"disable"禁用spinner)。
以下是可与此方法一起使用的不同操作的列表:
| 动作 | 说明 |
| destroy | 此操作用于完全destroy元素的微调器功能，并且元素返回其预初始化状态。此方法不接受任何参数。 |
| disable | 此操作用于禁用微调器功能。此方法不接受任何参数。 |
| enable | 此操作用于启用微调器功能。此方法不接受任何参数。 |
| option(optionName) | 此操作获取当前与指定的optionName关联的值。这里的optionName是要获取的选项的名称。 |
| option | 此操作获取一个对象，该对象包含表示当前微调器选项哈希的键/值对。此方法不接受任何参数。 |
| option(optionName，value) | 此操作设置与指定的optionName关联的微调器选项的值。 |
| option(options) | 此操作为微调器设置一个或多个选项。 |
| pageDown([pages]) | 此操作按照页面选项的定义，将值减少指定的页面数。 |
| 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>