如何使用 jQuery EasyUI 设计右键单击网页的菜单？

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

从官方网站下载所有需要的预编译文件并将其保存在您的工作文件夹中。请在代码实现过程中注意文件路径。

jQuery EasyUI 官方网站：

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

示例 1：以下示例演示了在网页上单击鼠标右键时的简单菜单显示。脚本部分还展示了使用 jQuery EasyUI 框架的事件处理。

HTML

  

    
    
  
    
    
    
    
  
    
    
    
  
    
    
    

  

    
        jQuery EasyUI basic menu
        on right click
    
  
    
        Please right click on
        the webpage.
    
  
    
    
        New Window
        
            Open
            
            
  
                
                    Select Language:
                
  
                
                    JavaScript
                    Perl
                    PHP
                    Python
                
            
        
  
        
            Save
        
  
        
        Exit
    
  
    
          
        /* Event handling */
        $(function () {
            $('#menuID').menu();
            $('#listID').tree();
            $(document).bind('contextmenu', function (e) {
                e.preventDefault();
                $('#menuID').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            });
        });
    

  

输出：

示例 2：以下示例演示了使用上述框架的菜单及其子菜单。

HTML

  

    
    
  
    
    
    
    
  
    
    
    
  
    
    
    

  

    
        jQuery EasyUI basic menu
        on right click
    
  
    
        Please right click on
        the webpage.
    
  
  
    
    
  
        
            New
        
          
        
            Open
            
                Interviews
                CS subjects
                Data Structures
                
                    Algorithms
                    
                        Bit algorithms
                        Searching 
                        
                            Sorting
                            
                                
                                    Linear search
                                
                                Binary search
                                Jump Search
                            
                        
                        Backtracking
                    
                
  
                
                    Window
                    
                        History
                        
                            Bookmarks
                        
                        
                            
                                GFG
                            
                        
                    
                
  
            
        
  
        
            Save
        
          
        
        
            Print
        
        
          
        
        Exit
    
  
    
        $(function () {
            $(document).bind('contextmenu', function (e) {
                e.preventDefault();
                $('#menuID').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            });
        });
    

  

输出：