@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery.easyui.min.js"></script>
<script src="~/Scripts/easyui-lang-zh_CN.js"></script>
<link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />
<link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />
</head>
<body>
<h2>Custom Menu Item</h2>
<p>Right click on page to display menu, move to the 'Open' item to display its custom sub content.</p>
<div style="margin:20px 0;"></div>
<div id="mm" class="easyui-menu" style="width:120px;">
<div>New</div>
<div>
<span>Open</span>
<div class="menu-content" style="text-align:left;padding:10px">
<div style="font-weight:bold;font-size:16px">Select your Language:</div>
<ul style="margin:0;padding:0 0 0 40px">
<li><a href="javascript:void(0)">Java</a></li>
<li><a href="javascript:void(0)">Basic</a></li>
<li><a href="javascript:void(0)">C++</a></li>
<li><a href="javascript:void(0)">Fortran</a></li>
<li>
<span>Other</span>
<input>
</li>
</ul>
<div style="padding:10px 0 0 30px">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">Ok</a>
</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">Save</div>
<div data-options="iconCls:'icon-print'">Print</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>
<script>
$(function () {
$(document).bind('contextmenu', function (e) {
e.preventDefault();
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
});
});
</script>
</body>
</html>
