使用JS菜单
本节内容可以参考示例文件"CaseStudy\WebViewer\菜单.Table"。
大多数时候，我们不需要系统菜单，也不需要用Foxtable菜单，因为网页的优势就是UI，做菜单可谓得心应手，而且你基本可以用AI代劳。
JS菜单不属于本文档应该讲述的范围，但是这里还是放个简单例子，方便大家比较。
窗口的AfterLoad事件：
'''Async
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
Await
wv.EnsureCoreWebView2Async(Nothing)
Dim
html
As
String
=
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单右键菜单演示</title>
<style>
body{padding:20px; font-family:微软雅黑;
background:#f5f5f5;}
.box{
width:180px; height:120px; margin:10px;
display:inline-block; text-align:center; line-height:120px;
color:white; font-size:16px; cursor:pointer;
border-radius:6px;
}
#box1{background:#ff4444;}
#box2{background:#4444ff;}
#box3{background:#44aa44;}
#msg{margin-top:20px; padding:10px; background:white; border:1px solid
#ccc;}
/*
简单菜单样式
*/
.menu{
position:fixed; display:none;
background:white; border:1px solid #ccc;
padding:5px; width:140px;
box-shadow:2px 2px 5px rgba(0,0,0,0.2);
}
.menu div{padding:6px 10px; cursor:pointer;}
.menu div:hover{background:#eee;}
/* 图标和文字稍微隔开一点，更清晰
*/
.menu div span{margin-left:5px;}
</style>
</head>
<body>
<h3>简单右键菜单演示（普通易懂版）</h3>
<p>在色块上点鼠标右键试试：</p>
<div id="box1" class="box">红色区域</div>
<div id="box2" class="box">蓝色区域</div>
<div id="box3" class="box">绿色区域</div>
<div id="msg">操作提示：</div>
<!-- 3个简单菜单（加上直观图标）
-->
<div id="menu1" class="menu">
<div>🗑️<span>删除</span></div>
<div>✏️<span>编辑</span></div>
<div>📋<span>属性</span></div>
</div>
<div id="menu2" class="menu">
<div>📋<span>复制</span></div>
<div>📌<span>粘贴</span></div>
<div>✂️<span>剪切</span></div>
</div>
<div id="menu3" class="menu">
<div>👁️<span>预览</span></div>
<div>🖨️<span>打印</span></div>
<div>📤<span>导出</span></div>
<div>📎<span>分享</span></div>
</div>
<script>
// 非常简单的写法，普通人也能看懂
var msg = document.getElementById('msg');
var menus = [
document.getElementById('menu1'),
document.getElementById('menu2'),
document.getElementById('menu3')
];
// 隐藏所有菜单
function hideAll(){
menus.forEach(function(m){ m.style.display='none'; });
}
// 显示菜单
function show(idx, x, y){
hideAll();
menus[idx].style.display='block';
menus[idx].style.left = x + 'px';
menus[idx].style.top = y + 'px';
}
// 右键
document.oncontextmenu = function(e){
e.preventDefault();
var id = e.target.id;
if(id=='box1') show(0, e.clientX, e.clientY);
if(id=='box2') show(1, e.clientX, e.clientY);
if(id=='box3') show(2, e.clientX, e.clientY);
};
// 点击空白关闭
document.onclick = hideAll;
// 菜单项点击
document.querySelectorAll('.menu div').forEach(function(item, i){
item.onclick = function(){
// 只取文字部分显示提示，更干净
var text = this.querySelector('span').innerText;
msg.innerHTML = '你选择了：'
+ text;
};
});
hideAll();
</script>
</body>
</html>
]]>.Value
wv.NavigateToString(html)