jQuery Mobile Listview refresh() 方法(1)

📌 相关文章

📜 jQuery Mobile Listview refresh() 方法(1)

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

jQuery Mobile Listview refresh() 方法介绍

一、介绍

jQuery Mobile Listview refresh() 方法可以在改变 Listview 数据后，立即更新 Listview 进行重新渲染。
这种刷新功能，是为了让 Listview 分页性质的插件，能够自动根据新的 Listview 数据进行所需的分页计算。

二、语法

$( ".selector" ).listview( "refresh" );

三、参数

无需传入任何参数，直接调用即可。

四、示例

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Mobile Listview refresh()</title>

	<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

	<script>
		$(document).ready(function() {

			// 绑定按钮点击事件
			$('#btn_refresh').click(function(event) {
				// 更新 Listview 数据
				$('#example_list li:last-child').after('<li><a href="#">New Item</a></li>');
				// 刷新 Listview
				$('#example_list').listview('refresh');
			});

		});
	</script>

</head>
<body>
	<div data-role="page">
		<header data-role="header">
			<h1>jQuery Mobile Listview refresh()</h1>
		</header>

		<main role="main" class="ui-content">
			<h2>示例</h2>
			<ul data-role="listview" data-inset="true" id="example_list">
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
			</ul>
			<button id="btn_refresh">添加一项</button>
		</main>
	</div>
</body>
</html>

上面的示例代码，演示了如何实现 refresh() 方法对 Listview 进行刷新。
点击按钮触发更新事件，利用 after() 进行添加新数据，再调用 refresh() 刷新 Listview。
注意：由于是通过添加新数据进行更新的，因此需要有一定的 Listview 基础。