📅 最后修改于: 2023-12-03 15:23:54.099000 🧑 作者: Mango
jQuery Mobile 是一个基于 HTML5 的移动 Web 开发框架，可以轻松地创建美观的移动 Web 应用。其中，无序列表视图是非常常见的一种形式，以下将介绍如何使用 jQuery Mobile 创建无序列表视图。
首先，需要在页面中导入 jQuery Mobile 库的 CSS 和 JS 文件。可以从官网下载对应版本的文件，也可以通过 CDN 加载：
<!-- 引入 jQuery Mobile 库的 CSS 文件 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 库和 jQuery Mobile 库的 JS 文件 -->
<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>
接下来，在页面中添加一个 ul 元素，将其设置为无序列表视图：
<!-- 创建一个无序列表视图 -->
<ul data-role="listview">
<li><a href="#">列表项1</a></li>
<li><a href="#">列表项2</a></li>
<li><a href="#">列表项3</a></li>
</ul>
注意，需要添加 data-role="listview" 属性才能将 ul 元素设置为无序列表视图。每个列表项可以使用 li 元素，并将其包裹在 ul 元素中。
如果希望在列表项之间添加分割线，可以在 ul 元素上添加 data-inset="true" 属性：
<!-- 在无序列表视图中添加分割线 -->
<ul data-role="listview" data-inset="true">
<li><a href="#">列表项1</a></li>
<li><a href="#">列表项2</a></li>
<li><a href="#">列表项3</a></li>
</ul>
如果希望在列表项前面添加图标，可以在 a 标签中添加 data-icon="名称" 属性，如下所示：
<!-- 在无序列表视图中添加图标 -->
<ul data-role="listview" data-inset="true">
<li><a href="#" data-icon="star">列表项1</a></li>
<li><a href="#" data-icon="delete">列表项2</a></li>
<li><a href="#" data-icon="gear">列表项3</a></li>
</ul>
这里列举了三种常用的图标，分别是星星、垃圾桶和齿轮，可以在官方文档中查看完整的图标列表。
如果列表中的每个项都拥有数量或计数器，需要在列表项标签（li）和内部链接标签（a）之间添加额外的 HTML：
<!-- 在无序列表视图中添加计数器 -->
<ul data-role="listview" data-inset="true">
<li>
<a href="#">
<h2>列表项1</h2>
<p>这是列表项1的详细信息</p>
<span class="ui-li-count">3</span>
</a>
</li>
<li>
<a href="#">
<h2>列表项2</h2>
<p>这是列表项2的详细信息</p>
<span class="ui-li-count">1</span>
</a>
</li>
<li>
<a href="#">
<h2>列表项3</h2>
<p>这是列表项3的详细信息</p>
</a>
</li>
</ul>
这里，可以在内部链接标签中添加自定义 h2 和 p 标签，以及一个类名为 ui-li-count 的 span 标签来显示计数器。
<head> 标签中调用；data-role="listview" 属性；data-autodividers="false" 属性添加到列表视图中；li > a 元素中。以上就是使用 jQuery Mobile 创建无序列表视图的详细步骤，希望可以对您有所帮助！