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

Last Updated : 23 Jul, 2024

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>

Output:

How to design calendar for web page using jQuery EasyUI ?

geetanjali16

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?