Collapsible 内容块
Collapsible 内容块
在上一节中，我们了解了如何在 PhoneGap 中创建多页UI。现在，我们将了解可折叠内容块以及我们将如何在我们的 PhoneGap 应用中使用它。
以前，我们在移动应用开发中处理有限的空间，并且我们没有足够的屏幕来接受它。为此，UI 中使用了不同的技术，以便尽可能多地利用屏幕上的额外空间。在这种情况下，我们将向其提供"可折叠内容块"。这些块只是可以折叠起来为我们在屏幕上提供更多空间的块。
我们将使用前面的示例来制作可折叠内容块。这些是用于在我们的应用程序中包含可折叠内容块的以下步骤:
1) 创建 index2.html 文件
我们将使用与 index.html 中预设的代码相同的代码创建一个新文件 index2.html。我们稍后将在 index2.html 文件中进行更改，而不是在 index.html 中。
2) 创建可折叠块
现在，我们将为可折叠集创建一个 div 标签，该标签将包含用于创建不同块的多个标签。我们将创建一个包含一些内容的块，当 data-collapsed 设置为 false 时将执行该块。
<div data-role="main" class="ui-content">
<div data-role="collapsible" data-collapsed="false">
<h3>Collapsible one</h3>
<p> It is collapsible data area. Put your content here.</p>
</div> <!--collapsible set-->
<button onclick="location.href='index.html#page2'">Click here</button>
</div> <!--main-->
3) 创建另一个可折叠块
接下来，我们将创建另外两个可折叠块。第一个可折叠将设置为默认值，第二个为 true。我们将复制第一个可折叠块并按以下方式用于两者:
<div data-role="main" class="ui-content">
<div data-role="collapsible" data-collapsed="false">
<h3>Collapsible one</h3>
<p> It is collapsible data area. Put your content here.</p>
</div> <!--collapsible set-->
<div data-role="collapsible">
<h3>Collapsible two</h3>
<p> It is default collapsible data area. Put your content here.</p>
</div> <!--collapsible set-->
<div data-role="collapsible" data-collapsed="true">
<h3>Collapsible three</h3>
<p> It is collapsible data area. Put your content here.</p>
</div> <!--collapsible set-->
<button onclick="location.href='index.html#page2'">Click here</button>
</div> <!--main-->
注意: 一次只能打开一个折叠。
在移动版 JQuery 中处理屏幕上的大量数据确实是一种很好的方式。我们的屏幕区域非常有限，可折叠内容块将帮助我们充分利用该区域。
