在我们的 NW.js 的系列教程中，已经在前面为大家先容过了：01）NW.js 是什么?02）NW.js 中的配置指南03）NW.js 中的 App 运用程序类04）NW.js 中的 Window 窗体类本日我们连续来为大家先容 NW.js 中的菜单类。
NW.js 中的菜单类 Menu 和 MenuItem 类
NW.js 框架中涉及到菜单的操作紧张有两个类，一个是菜单类 Menu，一个是菜单项类 MenuItem。
类名
功能描述
nw.Menu
用于创建和管理运用程序菜单栏和右键高下文菜单的类。
nw.MenuItem
用于创建菜单中的单个项目（如普通菜单项、复选框、分隔符、子菜单）。
现在我们分别列出它们的明细。
Menu 类的成员明细
属性明细：
名称
解释
menu.items
返回当前菜单中的所有菜单项。
方法明细：
名称
解释
new Menu([option])
创建一个新的菜单工具，option 可以指定菜单的类型。
menu.append(item)
将一个 MenuItem 工具添加到菜单的末端。
menu.insert(item, i)
在指定位置 i 插入一个 MenuItem 工具。
menu.remove(item)
从菜单中移除指定的 MenuItem 工具。
menu.removeAt(i)
移除菜单中指定位置 i 的菜单项。
menu.popup(x, y)
在指定的坐标 (x, y) 位置弹出高下文菜单。
menu.createMacBuiltin(appname, [options])
为 macOS 创建内置的运用程序菜单，并附加到主菜单栏上。
MenuItem 类的成员明细
属性明细：
属性名
描述
type
定义菜单项的类型，如 'normal', 'checkbox', 'separator' 等
label
菜单项显示的文本
icon
菜单项的图标路径
iconIsTemplate
(Mac) 指定图标是否为模板图像
tooltip
(Mac) 鼠标悬停时显示的提示文本
checked
对付 checkbox 或 radio 类型的菜单项，表示是否当选中
enabled
指定菜单项是否可用
submenu
子菜单，可以是 Menu 工具或 MenuItem 数组
key
快捷键
modifiers
与快捷键合营利用的润色键，如 'ctrl', 'alt', 'shift' 等
方法明细：
方法名
描述
new MenuItem(option)
布局函数，用于创建新的 MenuItem 实例。option 是一个包含上述属性的工具
click
定义菜单项被点击时的回调函数
事宜明细：
事宜名
描述
click
当菜单项被点击时触发的事宜
NW.js 中菜单的代码实例
接下来我们分别给出 菜单栏 以及 右键菜单 两个代码实例分别来对其基本的利用进行展示：
菜单栏菜单：
代码：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>NW.js macOS 自定义菜单示例</title></head><body> <h1>欢迎利用 NW.js macOS 自定义菜单示例</h1> <p>请查看屏幕顶部的自定义菜单并考试测验点击菜单项！
</p> <script> document.addEventListener('DOMContentLoaded', function() { var gui = nw.require('nw.gui'); var win = gui.Window.get(); function showAlert(message) { alert(message); } // 创建菜单栏 var menubar = new gui.Menu({ type: 'menubar' }); // 创建运用菜单（macOS 须要） var appMenu = new gui.Menu(); appMenu.append(new gui.MenuItem({ label: '关于 NW.js App', click: function() { showAlert('这是一个 NW.js macOS 自定义菜单示例'); } })); appMenu.append(new gui.MenuItem({ type: 'separator' })); appMenu.append(new gui.MenuItem({ label: '退出', click: function() { if (confirm('确定要退出吗？')) { nw.App.quit(); } } })); menubar.append(new gui.MenuItem({ label: 'NW.js App', submenu: appMenu })); // 菜单项1 var menu1 = new gui.Menu(); menu1.append(new gui.MenuItem({ label: '菜单项1.1', click: function() { showAlert('您点击了 菜单项1.1'); } })); menu1.append(new gui.MenuItem({ label: '菜单项1.2', click: function() { showAlert('您点击了 菜单项1.2'); } })); var submenu1_3 = new gui.Menu(); submenu1_3.append(new gui.MenuItem({ label: '菜单项1.3.1', click: function() { showAlert('您点击了 菜单项1.3.1'); } })); submenu1_3.append(new gui.MenuItem({ label: '菜单项1.3.2', click: function() { showAlert('您点击了 菜单项1.3.2'); } })); menu1.append(new gui.MenuItem({ label: '菜单项1.3', submenu: submenu1_3 })); menubar.append(new gui.MenuItem({ label: '菜单项1', submenu: menu1 })); // 菜单项2 var menu2 = new gui.Menu(); menu2.append(new gui.MenuItem({ label: '菜单项2.1', click: function() { showAlert('您点击了 菜单项2.1'); } })); menu2.append(new gui.MenuItem({ label: '菜单项2.2', click: function() { showAlert('您点击了 菜单项2.2'); } })); menubar.append(new gui.MenuItem({ label: '菜单项2', submenu: menu2 })); // 菜单项3 var menu3 = new gui.Menu(); menu3.append(new gui.MenuItem({ label: '菜单项3.1', click: function() { showAlert('您点击了 菜单项3.1'); } })); menu3.append(new gui.MenuItem({ label: '菜单项3.2', click: function() { showAlert('您点击了 菜单项3.2'); } })); menubar.append(new gui.MenuItem({ label: '菜单项3', submenu: menu3 })); // 设置窗口的菜单栏 win.menu = menubar; console.log('菜单已创建'); }); </script></body></html>
截图：
右键菜单：
代码：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NW.js 右键菜单示例</title></head><body> <h1>NW.js 右键菜单示例</h1> <p>在此页面的任何位置右键点击以显示自定义菜单。</p> <script> // 引入 nw.gui 模块 var gui = require('nw.gui'); // 创建菜单 var menu = new gui.Menu(); // 创建一级菜单项 var item1 = new gui.MenuItem({ label: '菜单1', click: function() { alert('您点击了 菜单1 菜单!'); } }); // 创建带有子菜单的菜单项 var submenu = new gui.Menu(); submenu.append(new gui.MenuItem({ label: '子菜单1', click: function() { alert('您点击了 子菜单1 菜单!'); } })); submenu.append(new gui.MenuItem({ label: '子菜单2', click: function() { alert('您点击了 子菜单2 菜单!'); } })); var item2 = new gui.MenuItem({ label: '菜单2', submenu: submenu }); // 创建分隔线 var separator = new gui.MenuItem({ type: 'separator' }); // 创建另一个菜单项 var item3 = new gui.MenuItem({ label: '菜单3', click: function() { alert('您点击了 菜单3 菜单!'); } }); // 将菜单项添加到菜单中 menu.append(item1); menu.append(item2); menu.append(separator); menu.append(item3); // 监听右键点击事宜 document.addEventListener('contextmenu', function(e) { e.preventDefault(); menu.popup(e.x, e.y); return false; }); </script></body></html>
截图：
