📅 最后修改于: 2023-12-03 15:08:21.350000 🧑 作者: Mango
在移动应用中，有时需要手动刷新页面来获取最新的数据。因此，刷新图标在移动应用中变得非常常见。jQuery Mobile 是一个非常流行的移动应用框架，它提供了一些便捷的方法来创建刷新图标以及处理刷新操作。
首先，需要导入 jQuery Mobile 库到 HTML 文件中。可以从官网下载或使用 CDN 链接:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>My App</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>
然后，可以在页面上添加一个 data-role="header" 的 div 元素，这将是一个非常常见的方式来显示刷新图标。这个头部可以包含其他一些元素，例如标题、按钮或链接，根据需求设置。
<div data-role="header">
<h1>My App</h1>
<a href="#" class="ui-btn-right" data-icon="refresh" data-iconpos="notext">Refresh</a>
</div>
这里使用了一个 <a> 元素作为按钮，data-icon="refresh" 属性指定了刷新图标，data-iconpos="notext" 属性指定了图标和文本不相邻。当用户点击这个按钮时，我们需要处理刷新操作。
为了处理刷新操作，可以监听这个按钮的 click 事件。当这个事件发生时，执行需要进行的操作。例如，重新加载当前页面、提交表单或使用 AJAX 请求从服务器获取新数据。
$(document).on('click', '.ui-btn-right', function() {
location.reload();
});
这里的例子只是简单地重新加载了当前页面，但是可以根据具体需求来进行调整。如果需要通过 AJAX 请求从服务器获取数据，则可以在这个事件处理程序中添加以下代码：
$.ajax({
url: 'https://example.com/data.json',
success: function(data) {
// 处理返回的数据
},
error: function() {
alert('Failed to fetch data');
}
});
在 jQuery Mobile 中制作刷新图标非常简单，只需要添加一个带有 data-icon="refresh" 属性的元素即可。然后，监听这个元素的点击事件，并执行相应的操作。根据需求不同，可能需要使用 AJAX 请求来获取新数据。