How to design menu on right click of webpage using jQuery EasyUI ?
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 = 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:
Contact Us