Skip to content
Related Articles

Related Articles

Improve Article

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=
                            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>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :