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