1. 简单列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile List</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>List Example</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<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> 元素。这将创建一个垂直的列表。
2. 分隔列表
<ul data-role="listview" data-inset="true">
<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" 属性创建了分隔列表。这将在列表中添加分组标题。
3. 缩略图列表
<ul data-role="listview" data-inset="true">
<li>
<img src="image1.jpg" alt="Thumbnail">
<h2>Item 1</h2>
<p>Description 1</p>
</li>
<li>
<img src="image2.jpg" alt="Thumbnail">
<h2>Item 2</h2>
<p>Description 2</p>
</li>
</ul>
在这个例子中，我们使用了包含缩略图、标题和描述的结构来创建缩略图列表。
这只是 jQuery Mobile 列表的基本用法示例。你可以根据实际需求选择不同的列表样式和选项，以及添加更多的内容和交互功能。详细的文档和示例可以在[官方文档](https://demos.jquerymobile.com/1.4.5/listview/)中找到。
转载请注明出处：http://www.pingtaimeng.com/article/detail/9425/jQuery Mobile