菜单


Menu 代表菜单栏或上下文菜单。MenuItem 是菜单中的项目。有关更多详细信息,请阅读 MenuItem 的文档。

概述

创建一个上下文菜单的示例

// Create an empty context menu
var menu = new nw.Menu();

// Add some items
menu.append(new nw.MenuItem({ label: 'Item A' }));
menu.append(new nw.MenuItem({ label: 'Item B' }));
menu.append(new nw.MenuItem({ type: 'separator' }));
menu.append(new nw.MenuItem({ label: 'Item C' }));

// Remove one item
menu.removeAt(1);

// Popup as context menu
menu.popup(10, 10);

// Iterate menu's items
for (var i = 0; i < menu.items.length; ++i) {
  console.log(menu.items[i]);
}

要创建菜单栏,通常需要创建一个两级菜单并将其分配给 win.menu。以下是创建菜单栏的示例

// Create an empty menubar
var menu = new nw.Menu({type: 'menubar'});

// Create a submenu as the 2nd level menu
var submenu = new nw.Menu();
submenu.append(new nw.MenuItem({ label: 'Item A' }));
submenu.append(new nw.MenuItem({ label: 'Item B' }));

// Create and append the 1st level menu to the menubar
menu.append(new nw.MenuItem({
  label: 'First Menu',
  submenu: submenu
}));

// Assign it to `window.menu` to get the menu displayed
nw.Window.get().menu = menu;

有关详细用法,请参阅 自定义菜单栏

将菜单与页面导航一起使用

在可导航页面中创建的菜单在重新加载或导航后将无法使用。原因是,为了防止内存泄漏,菜单甚至网页在导航后将被 JS 引擎垃圾回收。因此,建议在后台页面中使用菜单,后台页面在应用程序的生命周期中始终存在。有关如何在后台页面中执行脚本,请参阅 bg-scriptmain

new Menu([option])

  • option {Object} 可选
    • type {String} 可选 此方法接受两种类型:“menubar” 或 “contextmenu”。默认情况下,该值设置为 “contextmenu”。

创建一个 Menu 对象。

获取包含菜单中所有项目的数组。每个项目都是 MenuItem 的实例。有关详细信息,请参阅 MenuItem

  • item {MenuItem} 要附加到菜单尾部的项目

item 附加到菜单尾部。

  • item {MenuItem} 要插入菜单的项目
  • i {Integer} 在菜单列表中插入项目的索引

在菜单的第 i 个位置插入 item。索引从 0 开始。

  • item {MenuItem} 要移除的项目

从菜单中移除 item。此方法要求您将 MenuItem 保留在 Menu 之外。

  • i {Integer} 要从菜单中移除的项目的索引

从菜单中移除第 i 个项目。

  • x {Integer} 锚点的 x 位置
  • y {Integer} 锚点的 y 位置

在当前窗口的锚点 (x, y) 处弹出上下文菜单。此方法仅对 contextmenu 类型有效。

通常,您会监听 DOM 元素的 contextmenu 事件并手动弹出菜单

document.body.addEventListener('contextmenu', function(ev) { 
  ev.preventDefault();
  menu.popup(ev.x, ev.y);
  return false;
});

通过这种方式,您可以精确地选择为不同元素显示哪个菜单,并且您可以在弹出菜单之前更新菜单元素。

  • appname {String} 应用程序名称
  • options {Object} 可选
    • hideEdit {Boolean} 可选 不填充“编辑”菜单
    • hideWindow {Boolean} 可选 不填充“窗口”菜单

在 Mac 上的菜单栏中创建内置菜单(应用程序编辑窗口)。可以使用 items 属性操作这些项目。参数 appname 用于 应用程序 菜单的标题。

您仍然可以使用内置菜单和其他菜单项。例如,将项目追加或插入到菜单中仍然有效。

有关详细用法,请参阅 自定义菜单栏