📌  相关文章
📜  如何使用 jQuery EasyUI Mobile 设计手风琴?

📅  最后修改于: 2021-11-25 03:45:15             🧑  作者: Mango

EasyUI是一个 HTML5 框架,用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能,为开发人员节省大量时间。手风琴是在显示和隐藏之间切换的 HTML 内容。

jQuery EasyUI 框架的下载链接:

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

请下载以下代码实现的所有预编译文件,并注意正确的文件路径。

示例 1:下面的示例演示了使用 jQuery EasyUI框架的基本手风琴。它有显示和隐藏两个内容。一个是一个列表,第二个列表显示它的内容,就像从另一个名为“mycontent.html”的 HTML 文件加载 Ajax 一样。

HTML


  

    
    
  
    
    
    
  
    
    
    

  

    
        
            
                                     My Accordion                              
        
           
               
                
                        
  • Algorithms
  •                     
  • Data Structures
  •                     
  • Web designing
  •                     
  • More...
  •                 
            
               
            
        
    
  


HTML


  

    

My AJAX content.

          
            
  •             There are many important things that              should be taken care of, like user              friendliness, modularity, security,              maintainability, etc.         
  •                    
  •             Python is a high-level, general-purpose              and a very popular programming language.         
  •                    
  •             Java has been one of the most popular              programming language for many years.         
  •                    
  •             The Java codes are first compiled into              byte code (machine independent code).          
  •                    
  •             Java is used in all kind of applications             like Mobile Applications (Android is              Java based).         
  •                    
  •             When compared with C++, Java codes are              generally more maintainable because Java              does not allow many things which may lead             bad/inefficient programming if used              incorrectly.         
  •     
  


HTML


  

    
    
  
    
    
    
  
    
    
    
    
     

  

    
        
                            
                                     My Custom Header                              
        
        
            
                
                    
                        List 1                                                      27/50                                              
                
                
                        
  • Web design
  •                     
  • Mobile Apps
  •                     
  • Tableau
  •                     
  • More...
  •                 
            
                            
                
                    
                        List 2                                                                                       Ajax Loading                                                          25                                              
                
            
        
    
  


“mycontent.html”文件:以下文件用于数据内容的 Ajax 加载示例中。

HTML



  

    

My AJAX content.

          
            
  •             There are many important things that              should be taken care of, like user              friendliness, modularity, security,              maintainability, etc.         
  •                    
  •             Python is a high-level, general-purpose              and a very popular programming language.         
  •                    
  •             Java has been one of the most popular              programming language for many years.         
  •                    
  •             The Java codes are first compiled into              byte code (machine independent code).          
  •                    
  •             Java is used in all kind of applications             like Mobile Applications (Android is              Java based).         
  •                    
  •             When compared with C++, Java codes are              generally more maintainable because Java              does not allow many things which may lead             bad/inefficient programming if used              incorrectly.         
  •     
  

输出:

示例 2:以下示例演示了使用 jQuery EasyUI Mobile 插件的自定义手风琴标题。

HTML



  

    
    
  
    
    
    
  
    
    
    
    
     

  

    
        
                            
                                     My Custom Header                              
        
        
            
                
                    
                        List 1                                                      27/50                                              
                
                
                        
  • Web design
  •                     
  • Mobile Apps
  •                     
  • Tableau
  •                     
  • More...
  •                 
            
                            
                
                    
                        List 2                                                                                       Ajax Loading                                                          25                                              
                
            
        
    
  

输出: