极客教程jQuery Mobile Listview refresh()方法
jQuery Mobile是一套基于HTML5的用户交互widget工具箱，用于在jQuery基础上的各种用途。它旨在建立快速和响应的网站，可用于手机、标签和桌面。jQuery Listview是一个用于创建漂亮的列表的部件。它是一个简单和响应式的列表视图，用于查看无序的列表。
在这篇文章中，我们将使用jQuery Mobile refresh()方法，当页面加载后DOM（文档对象模型）被修改时，用于更新列表项的UI。列表可以在客户端使用JavaScript进行修改。
语法：refresh()方法不接受任何参数，当被调用时，列表视图得到更新的用户界面。
function refresh() {
$(".items").listview("refresh");
}
CDNs链接：使用以下CDNs的jQuery Mobile。
<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.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
例子：在这个例子中，有一个预先填充了一些项目的列表。接下来，有两个输入部分和“点击添加 “，它将添加一个新的列表项。刷新按钮可以刷新ListView用户界面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>jQuery Mobile Listview</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.1.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>jQuery Mobile Listview refresh() Method</strong>
</center>
<ul class="items" data-role="listview">
<li>
<a href=
"https://www.geeksforgeeks.org/data-structures"
target="_blank">
Data Structures
</a>
</li>
<li>
<a href=
"https://practice.geeksforgeeks.org/courses/complete-interview-preparation"
target="_blank">
Interview preparation
</a>
</li>
<li>
<a href=
"https://www.geeksforgeeks.org/java"
target="_blank">
Java Programming
</a>
</li>
</ul>
<div style="padding: 30px;">
<label for="name">Name</label>
<input type="text" name="name" id="name">
<label for="link">Link</label>
<input type="text" name="link" id="link">
<button onclick="addItem()">Click to add</button>
</div>
<button onclick="refresh()"
style="background-color:green;">
Refresh</button>
<script>
(".items").listview({
icon: "arrow-r",
});
function addItem() {
var item = "<li>" +
"<a href=\"" +("#link").val() + "\" target=\"_blank\">" +
("#name").val() +
"</a>" +
"</li>"
(".items").append(item);
("#link").val("");
("#name").val("");
}
function refresh() {
$(".items").listview("refresh");
}
</script>
</body>
</html>
输出:
