如何使用 jQuery Mobile 插件设计可编辑的列表视图？

在本文中，我们将学习如何使用 jQuery 移动插件设计可编辑的列表视图功能。该插件提供了一个直观的用户界面来向现有列表添加或删除列表项。

要设计和实现插件，请从链接下载所需的预编译文件或库并将其保存在您的工作文件夹中。编码时应注意文件路径名。

注意：请使用 HTML 代码头部部分中的以下链接进行执行，如下所示。

rel=”stylesheet” type=”text/css”/>

rel=”stylesheet” type=”text/css”/>

 

 
 

示例 1：以下示例使用 jQuery 移动插件演示了一个简单的可编辑列表视图。用户可以在列表中添加和删除水果名称，如下面的输出所示。

HTML

    
        
        
        
  
        
        
        
        
        
        
    
    
        jQuery Mobile Editable Listview
        
            
                Pineapple
                Mango
                Orange
                Banana
            
            
        
  
        
            var $list = $("#mylistID").listview({
                editable: true,
                title: "Fruits",
                emptyTitle: "No Fruits",
            });
        
    

输出：

• 编辑前：

• 编辑后：

示例 2：以下示例演示了另一个具有一些添加属性的可编辑列表视图。表单“id”应与“ul”标签上的 data-editable-form属性匹配，并且 data-editable属性设置为“true”。

HTML

    
        
        
        
        
        
        
        
        
        
    
  
    
        jQuery Mobile editable listview
        
            Complex Editable Listview
  
            
                
                    
                        
                            
                              Potato
                            
                        
                        
                            Shape:
                            
                                
                                 round
                                
                            
                        
                        
                            Color:
                            
                                
                                 brown
                                
                            
                        
                    
                
                
                    
                        
                             Brinjal
                            
                        
                        
                            Shape:
                            
                                
                                  oval
                                
                            
                        
                        
                            Color:
                            
                                
                                  purple
                                
                            
                        
                    
                
                
                    
                        
                             Tomato
                            
                        
                        
                            Shape:
                            
                                
                                  round
                                
                            
                        
                        
                            Color:
                            
                                
                                  red
                                
                            
                        
                    
                
            
            
                
                
                
                
                    Add
                
                
                    Clear
                
            
        
  
        
            var $list = $("#list").listview({
                editable: true,
                editableType: "simple",
                title: "Veggies",
                emptyTitle: "No Veggies",
            });
        
    

输出：

• 编辑前：

• 编辑后：