如何使用 jQuery EasyUI Mobile 创建列表和链接？

在本文中，我们将学习如何使用 jQuery EasyUI Mobile 设计列表、将它们分组并创建链接以便于导航。

EasyUI 是一个 HTML5 框架，用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能，为开发人员节省大量时间。

EasyUI for jQuery 下载：

https://www.jeasyui.com/download/index.php

实现时请注意预编译库文件的文件路径。

示例 1：以下示例演示了使用 jQuery EasyUI Mobile通过按钮创建列表和链接。

html

  

    
    
  
    
    
    
    
  
    
    
    
      
    
    
    
      
    
    
    

  

  
    
    
        
            
                List Button
            
        
          
        
        
            C
                
                    
                        Add
                    
                
            
            C++
                
                    
                        Add
                    
                
            
            Java
                
                    
                        Add
                    
                
            
            Python
                
                    
                        Add
                    
                
            
        
    

  

输出：

• 执行前：

执行后：

示例 2：以下示例演示使用上述插件对列表进行分组。

html

  

    
    
  
    
    
    
    
  
    
    
    
      
    
    
    
      
    
    
    

  

  
    
    
        
            
                
                    List group and link lists
                
            
        
        
        
            
            Algorithms
            
                
                    Analysis of algorithms
                
            
  
            
                
                    Searching algorithms
                
            
              
            
                
                    Geometric algorithms
                
            
  
            
                    Greedy algorithms
                
            
  
            
                Web Technologies
            
              
            
                HTML
            
              
            
                
                    Javascript
                
            
        
    
  
    
        
            
                
                    Details
                
                
  
                    
                    
                        Back
                    
                
            
        
  
        
            
                Go Back
            
        
    
      
    
  
        function display(target) {
  
            var link = $(target).text();
            $('#panel2-title').html(link);
            $.mobile.go('#divID2');
        }
    

  

输出：

• 执行前：

• 执行后：

示例 3：以下示例使用上述插件演示带有图像的简单列表。

html

  

    
    
  
    
    
    
    
  
    
    
    
      
    
    
    
      
    
    
    
      
    
        #listID .list-image {
            float: left;
            width: 32px;
            height: 32px;
            border: 0;
            margin-right: 5px;
        }
  
        #listID .list-header {
            font-size: 14px;
            font-weight: bold;
        }
  
        #listID .list-content {
            text-overflow: ellipsis;
            overflow: hidden;
        }
    

  

  
    
    
        
            
                
                    Images for simple lists
                
            
        
  
        
        
            
                
                
  
                
                HTML
                  
                
                
                    HTML stands for HyperText Markup Language.
                    It is used to design web pages.
                
            
              
            
                
                PHP
                
                    PHP is a server-side scripting language
                    designed specifically for web development.
                
            
        
    

  

输出：