PhoneGap中的列表视图

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

• 框架将触发点击列表项中的第一个链接
• 对链接中的URL发出Ajax请求
• 在DOM中创建新页面
• 启动页面过渡

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

1)创建index4.html文件

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

2)建立

标签

列表视图以无序列表和有序列表开始。无序列表将为我们提供未编号的列表视图，而有序列表将为我们提供编号的列表视图。我们将通过以下方式将

标记与data-role属性一起使用：

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

现在，我们将使用

• 标记将列表项添加到列表视图中。我们将在
  和标记之间使用这些标记。我们可以使用更多的
  • 标签添加多个列表项。这是默认的列表视图，编码为：

    
        
    
            
     Apple 
            
     Banana /li>
            
     Graps 
            
     Papaya 
            
     Orange 
            
     Litchi 
        
     
    

    

    4)参与链接

    现在，如果这些列表项被每个列表项内的链接所包围，则列表视图将是交互式的，并且这些项中的每一个都将充当按钮，以转到链接中href属性内的单个地址。我们将通过以下方式对此进行编码：

    
        
    
            
     Apple 
            
     Banana 
            
     Graps 
            
     Papaya 
            
     Orange 
            
     Litchi 
        
     
    

    

    5)创建编号列表

    如果要创建一个有序列表视图，我们将通过以下方式使用

    标记而不是
    标记：

    
        
    
            
     Apple 
            
     Banana 
            
     Graps 
            
     Papaya 
            
     Orange 
            
     Litchi 
        
     
    

    

    6)在列表项中添加描述

    如果我们要格式化列表项，我们也可以这样做。我们可以使用段落标签(

    )通过以下方式格式化列表项：

    
        
    
            
     Apple 
     It is good for diabetics and blood sugar regulation 
            
     Banana 
     It is respectable source of vitamin C and good for our heart 
            
     Graps 
            
     Papaya 
            
     Orange 
            
     Litchi 
        
     
    

    

    7)列表分隔符属性

    现在，我们将使用列表分隔符属性将列表分为两部分。为此，我们将使用

    • 标记：

      
      
                  
       Apple 
       It is good for diabetics and blood sugar regulation 
              
       Banana 
       It is respectable source of vitamin C and good for our heart 
              
       Graps 
              
       List is divided from here 
       
              
       Papaya 
              
       Orange 
              
       Litchi