<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content="
initial-scale
=
1
.0,
maximum-scale
=
1
.0,
user-scalable
=
no
">
<
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"
>
<
script
type
=
"text/javascript"
src
=
"jquery.min.js"
>
</
script
>
<
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
>
<
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
>
<
div
data-options
=
"iconCls:'icon-print',disabled:true"
>
Print
</
div
>
<
div
class
=
"menu-sep"
></
div
>
<
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
>