PhoneGap 中的列表视图

JQuery 列表视图被设计成一个简单的无序列表，包含链接的列表项。它是通过使用 data-role="listview" 属性创建的。为了将列表转换成一个移动友好的列表视图，JQuery 移动库应用了所有必需的样式。它会将列表转换成带有向右箭头指示器的列表。该指示器填充整个浏览器窗口的宽度。当我们点击列表项时，将执行以下操作

1. 框架会触发对列表项内第一个链接的点击
2. 为链接中的 URL 发出一个 Ajax 请求
3. 在 DOM 中创建新的页面
4. 启动页面转换

以下是用于在 PhoneGap 中创建列表视图的步骤

1) 创建 index4.html 文件

我们将创建一个新的文件 index5.html，其中包含与 index4.html 相同的代码，除了第 1 页部分中的可折叠内容部分和按钮。我们将在 index5.html 文件中进行更改，而不是在 index4.html 中。

2) 创建 <ul></ul> 标签

列表视图以无序和有序列表开始。无序列表将为我们提供一个非编号的列表视图，而有序列表将为我们提供一个编号的列表视图。我们将以以下方式使用带有 data-role 属性的 <ul></ul> 标签

3) 在列表视图中添加列表项

现在，我们将通过使用 <li></li> 标签将列表项添加到列表视图中。 我们将在 <ul> 和 </ul> 标签之间使用这些标签。 我们可以使用更多 <li></li> 标签添加多个列表项。 这将是一个默认的列表视图编码为

4) 涉及链接

现在，如果这些列表项被每个列表项中的链接包围，列表视图将是交互式的，并且这些项目中的每一个都将作为按钮，以转到链接中 attribute 内部的各个地址。我们将以下列方式对此进行编码

5) 创建编号列表

如果我们想创建一个有序列表视图，我们将使用 <ol></ol> 标签 而不是以下列方式使用 <ul></ul> 标签

6) 向列表项添加描述

如果我们想格式化列表项，我们也可以这样做。我们可以使用 标题标签(<h1></h1>) 和 段落标签(<p></p>) 来格式化我们的列表项，如下所示

7) 列表分隔符属性

现在，我们将使用列表分隔符属性将列表分成两部分。我们将以下列方式为此使用 <li></li> 标签