📅 最后修改于: 2023-12-03 15:16:45.105000 🧑 作者: Mango
jQuery UI 是一个基于 jQuery 的 UI 组件库，其中包含了大量的可扩展、主题化的 UI 组件，可以快速地开发出具有良好用户体验的前端页面。其中的 Spinner 组件用于实现数字输入框的输入和输出，支持部分键盘操作、鼠标滚轮操作等。
pageDown() 方法是 Spinner 组件中的一个函数，用于将当前值向下滚动一个 “页面”，比如当前显示值范围为 [1, 10]，页面大小为 5，那么执行 pageDown() 方法后，显示值范围将变为 [6, 15]。
$( ".selector" ).spinner( "pageDown" );
该方法不需要传递任何参数。
该方法没有返回值。
以下是一个简单的示例，展示了 pageDown() 方法的使用：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner pageDown() 方法</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<style>
.control-group {
margin-bottom: 20px;
}
label {
display: inline-block;
width: 100px;
}
</style>
<script>
$( function() {
$( "#spinner" ).spinner({
min: 1,
max: 100,
page: 5
});
$( "#prev" ).button().on( "click", function() {
$( "#spinner" ).spinner( "stepDown" );
});
$( "#next" ).button().on( "click", function() {
$( "#spinner" ).spinner( "stepUp" );
});
$( "#page-up" ).button().on( "click", function() {
$( "#spinner" ).spinner( "pageUp" );
});
$( "#page-down" ).button().on( "click", function() {
$( "#spinner" ).spinner( "pageDown" );
});
} );
</script>
</head>
<body>
<div class="control-group">
<label for="spinner">Spinner:</label>
<input id="spinner" name="spinner" value="5">
</div>
<button id="prev">上一步</button>
<button id="next">下一步</button>
<button id="page-up">上一页</button>
<button id="page-down">下一页</button>
</body>
</html>
在该示例中，我们使用了 jQuery UI 中的 Spinner 组件，初始化了一个显示范围为 [1, 100]，页面大小为 5 的输入框。我们通过四个 button 按钮分别触发 stepDown() 方法、stepUp() 方法、pageUp() 方法、pageDown() 方法，实现了数字输入框的上下翻页操作。
pageDown() 方法只有在页面大小 page 属性被设置时才能生效，在没有设置 page 属性的情况下，该方法将无法滚动数字输入框的值。
Return to GitHub