How to design menu on right click of webpage using jQuery EasyUI ?

Last Updated : 14 Jan, 2021

EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and, Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

Download all the required pre-compiled files from the official website and save it in your working folder. Please take care of file paths during code implementation.

Official website for jQuery EasyUI:

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

Example 1: The following example demonstrates a simple menu display on the right click of the webpage. The script part also shows the event handling using the jQuery EasyUI framework.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="initial-scale=1.0,  
        maximum-scale=1.0, user-scalable=no"> 
  
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css"> 
    <link rel="stylesheet" type="text/css" 
        href="demo.css"> 
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css"> 
  
    <!--jQuery library -->
    <script type="text/javascript" 
        src="jquery.min.js"> 
    </script> 
  
    <!--jQuery libraries of EasyUI  -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js"> 
    </script> 
</head> 
  
<body> 
    <h2> 
        jQuery EasyUI basic menu 
        on right click 
    </h2> 
  
    <p> 
        Please right click on 
        the webpage. 
    </p> 
  
    <!-- easyui-menu class is used  -->
    <div id="menuID" style="width:120px;"> 
        <div>New Window</div> 
        <div> 
            <span>Open</span> 
            <!-- menu-content class is used  -->
            <div class="menu-content" style= 
                "text-align:left;padding:10px"> 
  
                <div style="font-weight:bold; 
                    font-size:14px;margin-bottom:10px"> 
                    Select Language: 
                </div> 
  
                <ul id="listID"> 
                    <li>JavaScript</li> 
                    <li>Perl</li> 
                    <li>PHP</li> 
                    <li>Python</li> 
                </ul> 
            </div> 
        </div> 
  
        <div data-options="iconCls:'icon-save'"> 
            Save 
        </div> 
  
        <div class="menu-sep"></div> 
        <div>Exit</div> 
    </div> 
  
    <script> 
          
        /* Event handling */ 
        $(function () { 
            $('#menuID').menu(); 
            $('#listID').tree(); 
            $(document).bind('contextmenu', function (e) { 
                e.preventDefault(); 
                $('#menuID').menu('show', { 
                    left: e.pageX, 
                    top: e.pageY 
                }); 
            }); 
        }); 
    </script> 
</body> 
  
</html> 

Output:

Example 2: The following example demonstrates a menu with its submenu using the above-mentioned framework.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="initial-scale=1.0,  
            maximum-scale=1.0, user-scalable=no"> 
  
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css"> 
    <link rel="stylesheet" type="text/css" 
        href="demo.css"> 
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css"> 
  
    <!--jQuery library -->
    <script type="text/javascript" 
        src="jquery.min.js"> 
    </script> 
  
    <!--jQuery libraries of EasyUI  -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js"> 
    </script> 
</head> 
  
<body> 
    <h2> 
        jQuery EasyUI basic menu 
        on right click 
    </h2> 
  
    <p> 
        Please right click on 
        the webpage. 
    </p> 
  
  
    <!-- easyui-menu class is used  -->
    <div id="menuID" class="easyui-menu" 
        style="width:120px;"> 
  
        <div onclick="javascript:alert('new')"> 
            New 
        </div> 
          
        <div> 
            <span>Open</span> 
            <div style="width:150px;"> 
                <div><b>Interviews</b></div> 
                <div>CS subjects</div> 
                <div>Data Structures</div> 
                <div> 
                    <span>Algorithms</span> 
                    <div style="width:120px;"> 
                        <div>Bit algorithms</div> 
                        <div>Searching </div> 
                        <div> 
                            <span>Sorting</span> 
                            <div style="width:80px;"> 
                                <div onclick="javascript: 
                                    alert('Linear search')"> 
                                    Linear search 
                                </div> 
                                <div>Binary search</div> 
                                <div>Jump Search</div> 
                            </div> 
                        </div> 
                        <div>Backtracking</div> 
                    </div> 
                </div> 
  
                <div> 
                    <span>Window</span> 
                    <div style="width:120px;"> 
                        <div>History</div> 
                        <div data-options= 
"href:'https://www.geeksforgeeks.org/python-programming-language/'"> 
                            Bookmarks 
                        </div> 
                        <div> 
                            <a href= 
        "https://www.geeksforgeeks.org/" target="_blank"> 
                                GFG 
                            </a> 
                        </div> 
                    </div> 
                </div> 
  
            </div> 
        </div> 
  
        <div data-options="iconCls:'icon-save'"> 
            Save 
        </div> 
          
        <!-- Set disabled to true if not want to enable -->
        <div data-options="iconCls:'icon-print',disabled:true"> 
            Print 
        </div> 
        <div class="menu-sep"></div> 
          
        <!--menu-sep class is used for separator-->
        <div>Exit</div> 
    </div> 
  
    <script> 
        $(function () { 
            $(document).bind('contextmenu', function (e) { 
                e.preventDefault(); 
                $('#menuID').menu('show', { 
                    left: e.pageX, 
                    top: e.pageY 
                }); 
            }); 
        }); 
    </script> 
</body> 
  
</html> 