jQuery UI Spinner pageDown() 方法(1)

📌 相关文章

📜 jQuery UI Spinner pageDown() 方法(1)

📅 最后修改于: 2023-12-03 15:02:12.053000 🧑 作者: Mango

jQuery UI Spinner pageDown() 方法

jQuery UI Spinner pageDown() 方法用于将当前选中的值向下翻动一定数量的步长，效果类似于向下翻页。

语法

$(selector).spinner("pageDown", steps);

参数

selector：必需，用于指定要应用该方法的元素。
steps：可选，表示要向下翻动的步数。默认为1。

完整示例

<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Spinner pageDown() 方法示例</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.min.css">
	<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<script>
		$(function(){
			$("#spinner").spinner({
				min: 0,
				max: 100,
				step: 10
			});

			$("#btnPageUp").click(function(){
				$("#spinner").spinner("pageUp", 2);
			});

			$("#btnPageDown").click(function(){
				$("#spinner").spinner("pageDown", 2);
			});
		});
	</script>
</head>
<body>
	<p>
		<label for="spinner">数量:</label>
		<input id="spinner" name="spinner" value="20">
	</p>
	<p>
		<button id="btnPageUp">上一页</button>
		<button id="btnPageDown">下一页</button>
	</p>
</body>
</html>

在上述示例中，我们调用了 spinner 方法对指定的输入框元素进行了初始化，指定了表示最小值、最大值、步长等属性，然后分别对两个按钮添加了单击事件处理函数，通过调用 spinner 方法的 pageUp 和 pageDown 参数实现了向上、向下翻页的效果。

返回值

该方法返回表示当前选中值的 jQuery 对象。

总结

jQuery UI Spinner pageDown() 方法用于向下翻动一定数量的步长，常用于实现向下翻页等效果。该方法的语法、参数、示例和返回值等基本用法已经介绍完毕，希望对大家学习和使用 jQuery UI Spinner 等组件有所帮助。