极客教程jQuery UI旋转器选择数字数据
jQuery UI中的旋转器是用来通过使用箭头键或通过使用向上/向下按钮来增加或减少数值。这个旋转器是用于数字输入的。
我们将在代码中使用CDN链接来添加不同的库和样式。为了像其他jQuery UI widget一样显示这个日历，我们必须链接到jQuery和jQuery UI。这里有一个简单的代码，包含了所有的HTML标签来显示一个旋转器。你可以直接复制这段代码来显示旋转器。
示例 1:
<!DOCTYPE html>
<html>
<head>
<title>
jQuery UI | Spinner to select numeric data
</title>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/
themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery UI | Spinner to
select numeric data
</h3>
<input id="spinner" size=3 value=17>
<script>
(document).ready(function() {
( "#spinner" ).spinner();
});
</script>
</body>
</html>
输出:
默认值：它用于为输入框设置默认值。
示例 2:
<!DOCTYPE html>
<html>
<head>
<title>
jQuery UI | Spinner to select numeric data
</title>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/
themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery UI | Spinner to
select numeric data
</h3>
<input id="spinner" size=3>
<script>
(document).ready(function() {
( "#spinner" ).spinner();
$( "#spinner" ).val(500)
});
</script>
</body>
</html>
输出:
最大和最小值：它可以设置旋转器的上限和下限。
<script>
(document).ready(function() {
( "#spinner" ).spinner({
max: 20,
min: -10
});
});
</script>
页值：我们可以通过页值来设置上页或下页的按键值。
<script>
(document).ready(function() {
( "#spinner" ).spinner({
page:50
});
});
</script>
步长值：我们可以通过步长来设置向上箭头或向下箭头按钮的值。
<script>
(document).ready(function() {
( "#spinner" ).spinner({
step:10
});
});
</script>