<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Listview</title>
<!-- 引入 jQuery 核心库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 引入 jQuery Mobile 样式表 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery Mobile 脚本文件 -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Listview Example</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</body>
</html>
在这个例子中，我们使用了 data-role="listview" 属性定义了一个简单的列表视图。每个列表项使用 <li> 元素包装，链接使用 <a> 元素。这将创建一个垂直的列表。
分隔列表视图
<ul data-role="listview" data-inset="true" data-divider-theme="b">
<li data-role="list-divider">Group 1</li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li data-role="list-divider">Group 2</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
在这个例子中，我们使用了 data-role="list-divider" 属性创建了分隔列表视图。这将在列表中添加分组标题。data-divider-theme 用于指定分隔符的主题。
图标列表视图
<ul data-role="listview" data-inset="true">
<li><a href="#" class="ui-btn-icon-right ui-icon-carat-r">Item 1</a></li>
<li><a href="#" class="ui-btn-icon-right ui-icon-carat-r">Item 2</a></li>
<li><a href="#" class="ui-btn-icon-right ui-icon-carat-r">Item 3</a></li>
</ul>
在这个例子中，我们使用了 ui-btn-icon-right 和 ui-icon-carat-r 类来在列表项中添加右侧的小箭头图标。
这只是 jQuery Mobile 列表视图的基本用法示例。你可以根据实际需求选择不同的列表样式和选项，以及添加更多的内容和交互功能。详细的文档和示例可以在[官方文档](https://demos.jquerymobile.com/1.4.5/listview/)中找到。
转载请注明出处：http://www.pingtaimeng.com/article/detail/9426/jQuery Mobile