Appearance
菜单相关事件
自定义菜单事件
OnCustomMenuCmd2
语法
javascript
OnCustomMenuCmd2(menuPos, submenuPos, subsubmenuPos, menuCaption, myMenuID)
参数
名称 | 必选/可选 | 数据类型 | 说明 |
---|---|---|---|
menuPos | 必选 | long | 一级菜单位置 |
submenuPos | 必选 | long | 二级菜单位置 |
subsubmenuPos | 必选 | long | 三级菜单位置 |
menuCaption | 必选 | string | 自定义菜单名称 |
myMenuID | 必选 | long | 自定义菜单ID |
说明
该事件在用户单击自定义主菜单中的项目时执行。 各个参数的含义请参考AddCustomMenuItem2方法。
注意:在事件中可以通过判断ID和menuCaption两种方式,在对点击菜单事件进行相应操作。而且这个事件并不能捕获在文件菜单下面的菜单项,如果需要此功能参见OnCustomFileMenuCmd事件。
示例代码
javascript
// 自定义菜单命令事件处理
function OnCustomMenuCmd2(menuPos, submenuPos, subsubmenuPos, menuCaption, myMenuID) {
console.log("菜单点击事件:");
console.log("一级菜单位置:", menuPos);
console.log("二级菜单位置:", submenuPos);
console.log("三级菜单位置:", subsubmenuPos);
console.log("菜单标题:", menuCaption);
console.log("菜单ID:", myMenuID);
// 根据菜单ID处理不同操作
switch(myMenuID) {
case 100:
handleNewDocument();
break;
case 101:
handleOpenDocument();
break;
case 102:
handleSaveDocument();
break;
case 103:
handlePrintDocument();
break;
default:
console.log("未知菜单命令:", myMenuID);
}
// 根据菜单标题处理操作
switch(menuCaption) {
case "新建文档":
handleNewDocument();
break;
case "打开文档":
handleOpenDocument();
break;
case "保存文档":
handleSaveDocument();
break;
case "打印文档":
handlePrintDocument();
break;
default:
console.log("未知菜单标题:", menuCaption);
}
}
// 处理新建文档
function handleNewDocument() {
console.log("执行新建文档操作");
// 创建新文档
// 初始化文档
// 设置默认属性
}
// 处理打开文档
function handleOpenDocument() {
console.log("执行打开文档操作");
// 显示文件选择对话框
// 打开选中的文档
// 加载文档内容
}
// 处理保存文档
function handleSaveDocument() {
console.log("执行保存文档操作");
// 保存当前文档
// 更新文档状态
// 记录保存日志
}
// 处理打印文档
function handlePrintDocument() {
console.log("执行打印文档操作");
// 显示打印预览
// 设置打印参数
// 执行打印操作
}
OnCustomFileMenuCmd
语法
javascript
OnCustomFileMenuCmd(menuIndex, menuCaption, menuID)
参数
名称 | 必选/可选 | 数据类型 | 说明 |
---|---|---|---|
menuIndex | 必选 | long | 自定义文件菜单位置索引 |
menuCaption | 必选 | string | 自定义文件菜单名称 |
menuID | 可选 | long | 自定义文件菜单ID |
说明
该事件在用户单击自定义文件菜单中的项目时执行。 第一个参数是菜单索引,从0开始计算;第二个参数是菜单标题;第三个参数是调用AddFileMenuItem方法增加主菜单项目时的第4个参数,也就是自定义的菜单ID。
注意:在事件中可以通过判断ID和menuCaption两种方式,在对点击菜单事件进行相应操作。此事件只能捕获在文件菜单下面的菜单项,如果需要此功能参见OnCustomFileMenuCmd事件。
示例代码
javascript
// 自定义文件菜单命令事件处理
function OnCustomFileMenuCmd(menuIndex, menuCaption, menuID) {
console.log("文件菜单点击事件:");
console.log("菜单索引:", menuIndex);
console.log("菜单标题:", menuCaption);
console.log("菜单ID:", menuID);
// 根据菜单ID处理不同操作
switch(menuID) {
case 300:
handleCustomSave();
break;
case 301:
handleCustomExport();
break;
case 302:
handleCustomImport();
break;
case 303:
handleCustomBackup();
break;
default:
console.log("未知文件菜单命令:", menuID);
}
// 根据菜单标题处理操作
switch(menuCaption) {
case "自定义保存":
handleCustomSave();
break;
case "自定义导出":
handleCustomExport();
break;
case "自定义导入":
handleCustomImport();
break;
case "自定义备份":
handleCustomBackup();
break;
default:
console.log("未知文件菜单标题:", menuCaption);
}
}
// 处理自定义保存
function handleCustomSave() {
console.log("执行自定义保存操作");
// 执行自定义保存逻辑
// 保存到指定位置
// 更新文档状态
}
// 处理自定义导出
function handleCustomExport() {
console.log("执行自定义导出操作");
// 选择导出格式
// 设置导出参数
// 执行导出操作
}
// 处理自定义导入
function handleCustomImport() {
console.log("执行自定义导入操作");
// 选择导入文件
// 解析文件内容
// 导入到当前文档
}
// 处理自定义备份
function handleCustomBackup() {
console.log("执行自定义备份操作");
// 创建备份文件
// 保存到备份目录
// 记录备份信息
}
原始菜单事件
BeforeOriginalMenuCommand
语法
javascript
BeforeOriginalMenuCommand(menuTitle, IsCancel)
参数
名称 | 必选/可选 | 数据类型 | 说明 |
---|---|---|---|
menuTitle | 必选 | string | 菜单标题 |
IsCancel | 必选 | bool | 是否取消命令 |
说明
在用户执行文档菜单命令之前执行。 以下代码将显示用户点击的菜单命令,并取消所有操作(将CancelLastCommand属性设定为true则可以取消操作)。
示例代码
html
<object name='webwps' id='webwps_id' type='application/ntko-plug'
data='/opt/kingsoft/wps-office/office6/mui/default/templates/Normal.dotm'
width='1000' height='600'
ForBeforeOriginalMenuCommand='BeforeOriginalMenuCommand'>
</object>
javascript
// 原始菜单命令前事件处理
function BeforeOriginalMenuCommand(menuTitle, IsCancel) {
console.log("原始菜单命令:", menuTitle);
console.log("是否取消:", IsCancel);
// 根据菜单标题处理不同操作
switch(menuTitle) {
case "新建":
handleBeforeNew();
break;
case "打开":
handleBeforeOpen();
break;
case "保存":
handleBeforeSave();
break;
case "另存为":
handleBeforeSaveAs();
break;
case "打印":
handleBeforePrint();
break;
default:
console.log("未知原始菜单命令:", menuTitle);
}
// 如果需要取消操作,设置IsCancel为true
if (shouldCancelOperation(menuTitle)) {
IsCancel = true;
console.log("取消操作:", menuTitle);
}
}
// 处理新建前操作
function handleBeforeNew() {
console.log("新建文档前的处理");
// 检查当前文档是否已保存
// 提示用户保存
// 执行新建操作
}
// 处理打开前操作
function handleBeforeOpen() {
console.log("打开文档前的处理");
// 检查当前文档状态
// 验证文件权限
// 执行打开操作
}
// 处理保存前操作
function handleBeforeSave() {
console.log("保存文档前的处理");
// 验证文档内容
// 检查保存权限
// 执行保存操作
}
// 处理另存为前操作
function handleBeforeSaveAs() {
console.log("另存为前的处理");
// 选择保存位置
// 设置保存参数
// 执行另存为操作
}
// 处理打印前操作
function handleBeforePrint() {
console.log("打印前的处理");
// 检查打印设置
// 验证打印权限
// 执行打印操作
}
// 判断是否应该取消操作
function shouldCancelOperation(menuTitle) {
// 根据业务逻辑判断是否取消操作
var restrictedOperations = ["删除", "清空", "重置"];
return restrictedOperations.includes(menuTitle);
}
完整示例
菜单事件管理器
javascript
// 菜单事件管理器
class MenuEventManager {
constructor() {
this.menuHandlers = new Map();
this.fileMenuHandlers = new Map();
this.originalMenuHandlers = new Map();
}
// 注册自定义菜单处理器
registerCustomMenuHandler(menuID, handler) {
this.menuHandlers.set(menuID, handler);
}
// 注册文件菜单处理器
registerFileMenuHandler(menuID, handler) {
this.fileMenuHandlers.set(menuID, handler);
}
// 注册原始菜单处理器
registerOriginalMenuHandler(menuTitle, handler) {
this.originalMenuHandlers.set(menuTitle, handler);
}
// 处理自定义菜单命令
handleCustomMenuCommand(menuPos, submenuPos, subsubmenuPos, menuCaption, myMenuID) {
console.log("处理自定义菜单命令:", myMenuID);
if (this.menuHandlers.has(myMenuID)) {
const handler = this.menuHandlers.get(myMenuID);
handler(menuPos, submenuPos, subsubmenuPos, menuCaption, myMenuID);
} else {
console.warn("未找到菜单处理器:", myMenuID);
}
}
// 处理文件菜单命令
handleFileMenuCommand(menuIndex, menuCaption, menuID) {
console.log("处理文件菜单命令:", menuID);
if (this.fileMenuHandlers.has(menuID)) {
const handler = this.fileMenuHandlers.get(menuID);
handler(menuIndex, menuCaption, menuID);
} else {
console.warn("未找到文件菜单处理器:", menuID);
}
}
// 处理原始菜单命令
handleOriginalMenuCommand(menuTitle, IsCancel) {
console.log("处理原始菜单命令:", menuTitle);
if (this.originalMenuHandlers.has(menuTitle)) {
const handler = this.originalMenuHandlers.get(menuTitle);
const shouldCancel = handler(menuTitle, IsCancel);
return shouldCancel;
}
return false;
}
}
// 创建菜单事件管理器实例
const menuEventManager = new MenuEventManager();
// 注册菜单处理器
menuEventManager.registerCustomMenuHandler(100, (menuPos, submenuPos, subsubmenuPos, menuCaption, myMenuID) => {
console.log("执行新建文档操作");
// 新建文档逻辑
});
menuEventManager.registerCustomMenuHandler(101, (menuPos, submenuPos, subsubmenuPos, menuCaption, myMenuID) => {
console.log("执行打开文档操作");
// 打开文档逻辑
});
menuEventManager.registerFileMenuHandler(300, (menuIndex, menuCaption, menuID) => {
console.log("执行自定义保存操作");
// 自定义保存逻辑
});
menuEventManager.registerOriginalMenuHandler("保存", (menuTitle, IsCancel) => {
console.log("保存前的验证");
// 验证逻辑
return false; // 不取消操作
});
菜单权限控制
javascript
// 菜单权限控制
class MenuPermissionController {
constructor() {
this.permissions = new Map();
this.userRole = 'user'; // 默认用户角色
}
// 设置用户角色
setUserRole(role) {
this.userRole = role;
this.updateMenuPermissions();
}
// 更新菜单权限
updateMenuPermissions() {
switch(this.userRole) {
case 'admin':
this.setAdminPermissions();
break;
case 'editor':
this.setEditorPermissions();
break;
case 'viewer':
this.setViewerPermissions();
break;
default:
this.setDefaultPermissions();
}
}
// 设置管理员权限
setAdminPermissions() {
this.permissions.set('新建', true);
this.permissions.set('打开', true);
this.permissions.set('保存', true);
this.permissions.set('另存为', true);
this.permissions.set('打印', true);
this.permissions.set('删除', true);
}
// 设置编辑者权限
setEditorPermissions() {
this.permissions.set('新建', true);
this.permissions.set('打开', true);
this.permissions.set('保存', true);
this.permissions.set('另存为', true);
this.permissions.set('打印', true);
this.permissions.set('删除', false);
}
// 设置查看者权限
setViewerPermissions() {
this.permissions.set('新建', false);
this.permissions.set('打开', true);
this.permissions.set('保存', false);
this.permissions.set('另存为', false);
this.permissions.set('打印', true);
this.permissions.set('删除', false);
}
// 设置默认权限
setDefaultPermissions() {
this.permissions.set('新建', false);
this.permissions.set('打开', false);
this.permissions.set('保存', false);
this.permissions.set('另存为', false);
this.permissions.set('打印', false);
this.permissions.set('删除', false);
}
// 检查菜单权限
hasPermission(menuTitle) {
return this.permissions.get(menuTitle) || false;
}
// 处理菜单权限检查
checkMenuPermission(menuTitle, IsCancel) {
if (!this.hasPermission(menuTitle)) {
console.log("用户无权限执行操作:", menuTitle);
alert("您没有权限执行此操作");
IsCancel = true;
return true;
}
return false;
}
}
// 创建权限控制器实例
const permissionController = new MenuPermissionController();
// 设置用户角色
permissionController.setUserRole('editor');
// 在原始菜单命令前检查权限
function BeforeOriginalMenuCommand(menuTitle, IsCancel) {
if (permissionController.checkMenuPermission(menuTitle, IsCancel)) {
return;
}
console.log("执行菜单命令:", menuTitle);
// 执行菜单命令
}
注意事项
事件绑定:
- 确保在HTML中正确绑定事件处理函数
- 事件函数名要与HTML中的属性值一致
- 注意大小写和拼写
参数处理:
- 检查参数的有效性
- 处理可选参数的情况
- 注意参数的数据类型
菜单识别:
- 可以通过菜单ID或菜单标题识别
- 建议使用菜单ID进行识别
- 菜单标题可能因语言设置而变化
权限控制:
- 实现菜单权限控制
- 根据用户角色显示/隐藏菜单
- 处理权限不足的情况
错误处理:
- 处理菜单操作失败的情况
- 提供用户友好的错误信息
- 记录操作日志
性能优化:
- 避免在事件处理中执行耗时操作
- 合理使用异步操作
- 避免重复处理
用户体验:
- 提供及时的状态反馈
- 显示操作进度
- 处理用户交互
兼容性:
- 考虑不同浏览器的兼容性
- 处理不同版本的差异
- 测试各种场景