PhoneGap 列表视图
PhoneGap中的列表视图
JQuery 列表视图被设计为具有链接列表项的简单无序列表。它是通过使用属性 data-role="listview" 创建的。为了将列表转换为适合移动设备的列表视图，JQuery 移动库应用了所有必需的样式。它将转换带有右箭头指示器的列表。该指示器填充浏览器窗口的整个宽度。当我们点击列表项时，会进行以下操作:
框架将触发对列表项内第一个链接的点击
针对链接中的 URL 发出 Ajax 请求
在 DOM 中创建新页面
开始页面转换
这些是用于在PhoneGap中创建列表视图的以下步骤:
1) 创建index4.html 文件
我们将创建一个新文件 index5.html，代码与 index4.html 中预设的代码相同，但页面 1 部分中的可折叠内容部分和按钮除外。我们稍后将在 index5.html 文件中进行更改，而不是在 index4.html 中。
2) 创建 标签
列表视图以无序列表和有序列表开始。无序列表会给我们一个没有编号的列表视图，有序列表会给我们一个有编号的列表视图。我们将使用 标签和 data-角色属性如下:
<div data-role="main" class="ui-content">
<ul data-role="listview">
</ul>
</div> <!--main-->
3) 在列表视图中添加列表项
现在，我们将使用 <li></li> 在列表视图中添加列表项/strong> 标签。我们将在 和 标记之间使用这些标记。我们可以使用多个 <li></li> 标签添加多个列表项。这将是一个默认的列表视图，编码为:
<div data-role="main" class="ui-content">
<ul data-role="listview">
<li> Apple </li>
<li> Banana /li>
<li> Graps </li>
<li> Papaya </li>
<li> Orange </li>
<li> Litchi </li>
</ul>
</div> <!--main-->
4) 涉及链接
现在，如果这些列表项被每个列表项内的链接包围，则列表视图将是交互式的，并且这些项中的每一项都将作为一个按钮来转到href 属性在链接中。我们将通过以下方式对其进行编码:
<div data-role="main" class="ui-content">
<ul data-role="listview">
<li><a href="#"> Apple </a></li>
<li><a href="#"> Banana </a></li>
<li><a href="#"> Graps </a></li>
<li><a href="#"> Papaya </a></li>
<li><a href="#"> Orange </a></li>
<li><a href="#"> Litchi </a></li>
</ul>
</div> <!--main-->
5) 创建编号列表
如果我们想创建一个有序列表视图，我们将使用 标签 而不是使用 标签，如下所示:
<div data-role="main" class="ui-content">
<ol data-row="listview">
<li><a href="#"> Apple </a></li>
<li><a href="#"> Banana </a></li>
<li><a href="#"> Graps </a></li>
<li><a href="#"> Papaya </a></li>
<li><a href="#"> Orange </a></li>
<li><a href="#"> Litchi </a></li>
</ol>
</div> <!--main-->
6) 添加说明列表项
如果我们想格式化列表项，我们也可以这样做。我们可以使用标题标签(<h2></h2>) 和段落标记(<p></p>) 以下列方式格式化我们的列表项:
<div data-role="main" class="ui-content">
<ol data-row="listview">
<li><a href="#"><h3> Apple </h3><p> It is good for diabetics and blood sugar regulation </p></a></li>
<li><a href="#"><h3> Banana </h3><p> It is respectable source of vitamin C and good for our heart </p></a></li>
<li><a href="#"> Graps </a></li>
<li><a href="#"> Papaya </a></li>
<li><a href="#"> Orange </a></li>
<li><a href="#"> Litchi </a></li>
</ol>
</div> <!--main-->
7) 列表分隔符属性
现在，我们将使用列表分隔符属性将列表分成或分成两部分。为此，我们将通过以下方式使用
标记:
<div data-role="main" class="ui-content">
<ol data-role="listview">
<li><a href="#"><h3> Apple </h3><p> It is good for diabetics and blood sugar regulation </p></a></li>
<li><a href="#"><h3> Banana </h3><p> It is respectable source of vitamin C and good for our heart </p></a></li>
<li><a href="#"> Graps </a></li>
<li data-role="list-divider"> List is divided from here </li>
<li><a href="#"> Papaya </a></li>
<li><a href="#"> Orange </a></li>
<li><a href="#"> Litchi </a></li>
</ol>
</div> <!--main-->
