選單

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]);
}

若要建立選單列，通常您必須建立一個 2 層級的選單並將其指定給 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-script 和 main，了解如何在背景頁面中執行指令碼。

new Menu([選項])

  • 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 {字串} 應用程式名稱
  • options {物件} 選用
    • hideEdit {布林值} 選用 不要填入編輯選單
    • hideWindow {布林值} 選用 不要填入視窗選單

在 Mac 上的選單列中建立內建選單（應用程式、編輯和視窗）。可以使用 items 屬性來操作項目。參數 appname 用於應用程式選單的標題。

您仍然可以使用內建選單搭配其他選單項目。亦即，附加或插入項目至選單仍然有效。

另請參閱 自訂選單列 以取得詳細用法。