可折叠内容块

在上一节中，我们了解了如何在PhoneGap中创建多页UI。现在，我们将了解可折叠内容块以及如何在PhoneGap应用程序中使用它。

以前，我们在移动应用程序开发中只处理有限的房地产，并且我们没有足够的屏幕来容纳它。为此，UI中使用了不同的技术，以便在屏幕上尽可能多地利用自己的不动产。在这种情况下，我们将向其提供“可折叠内容块”。这些块只是可以折叠以在屏幕上提供更多空间的简单块。

我们将使用前面的示例来显示可折叠内容块。以下是用于在我们的应用程序中包含可折叠内容块的以下步骤：

1)创建index2.html文件

我们将使用与index.html中预设的代码相同的代码创建一个新文件index2.html 。我们稍后将在index2.html文件而不是index.html中进行更改。

2)创建可折叠块

现在，我们将为可折叠集创建一个div标签，其中将包含多个用于创建不同块的标签。我们将创建一个包含一些内容的块，当数据折叠设置为false时，该块将执行。

 

    

        
Collapsible one
        
 It is collapsible data area. Put your content here.
    
 
    Click here
 

3)创建另一个可折叠块

接下来，我们将创建另外两个可折叠块。第一个可折叠设置为默认值，第二个设置为true。我们将以以下方式复制第一个可折叠块并用于两者：

        
Collapsible one
        
 It is collapsible data area. Put your content here.
    
 
                
    

        
Collapsible two
        
 It is default collapsible data area. Put your content here.
        
 
                
    

        
Collapsible three
        
 It is collapsible data area. Put your content here.
    
 
Click here
 

注意：一次只能打开一个可折叠的门。

这是在JQuery mobile中处理屏幕上大量数据的好方法。我们的屏幕区域非常有限，可折叠内容块将帮助我们充分利用该区域。