📌  相关文章
📜  如何使用 jQuery Mobile 插件设计可编辑的列表视图?

📅  最后修改于: 2021-11-24 05:38:59             🧑  作者: Mango

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

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

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

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

HTML


    
        
        
        
  
        
        
        
        
    
    
        

jQuery Mobile Editable Listview

        
            
                    
  • Pineapple
  •                 
  • Mango
  •                 
  • Orange
  •                 
  • Banana
  •             
            
        
                


HTML


    
        
        
        
        
        
        
        
    
  
    
        

jQuery Mobile editable listview

        
            

Complex Editable Listview

                            
                                                                                                 
        
                


输出:

  • 编辑前:

  • 编辑后:

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

HTML



    
        
        
        
        
        
        
        
    
  
    
        

jQuery Mobile editable listview

        
            

Complex Editable Listview

                            
                                                                                                 
        
                

输出:

  • 编辑前:

  • 编辑后: