Electron menu 模塊
menu 類可以用來創(chuàng)建原生菜單，它可用作應用菜單和 context 菜單.
這個模塊是一個主進程的模塊，并且可以通過 remote 模塊給渲染進程調用.
每個菜單有一個或幾個菜單項 menu items，并且每個菜單項可以有子菜單.
下面這個例子是在網(wǎng)頁(渲染進程)中通過 remote 模塊動態(tài)創(chuàng)建的菜單，并且右鍵顯示:
<!-- index.html -->
<script>
const remote = require('electron').remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;
var menu = new Menu();
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log('item 1 clicked'); } }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));
window.addEventListener('contextmenu', function (e) {
e.preventDefault();
menu.popup(remote.getCurrentWindow());
}, false);
</script>
例子，在渲染進程中使用模板api創(chuàng)建應用菜單:
var template = [
{
label: 'Edit',
submenu: [
{
label: 'Undo',
accelerator: 'CmdOrCtrl+Z',
role: 'undo'
},
{
label: 'Redo',
accelerator: 'Shift+CmdOrCtrl+Z',
role: 'redo'
},
{
type: 'separator'
},
{
label: 'Cut',
accelerator: 'CmdOrCtrl+X',
role: 'cut'
},
{
label: 'Copy',
accelerator: 'CmdOrCtrl+C',
role: 'copy'
},
{
label: 'Paste',
accelerator: 'CmdOrCtrl+V',
role: 'paste'
},
{
label: 'Select All',
accelerator: 'CmdOrCtrl+A',
role: 'selectall'
},
]
},
{
label: 'View',
submenu: [
{
label: 'Reload',
accelerator: 'CmdOrCtrl+R',
click: function(item, focusedWindow) {
if (focusedWindow)
focusedWindow.reload();
}
},
{
label: 'Toggle Full Screen',
accelerator: (function() {
if (process.platform == 'darwin')
return 'Ctrl+Command+F';
else
return 'F11';
})(),
click: function(item, focusedWindow) {
if (focusedWindow)
focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
}
},
{
label: 'Toggle Developer Tools',
accelerator: (function() {
if (process.platform == 'darwin')
return 'Alt+Command+I';
else
return 'Ctrl+Shift+I';
})(),
click: function(item, focusedWindow) {
if (focusedWindow)
focusedWindow.toggleDevTools();
}
},
]
},
{
label: 'Window',
role: 'window',
submenu: [
{
label: 'Minimize',
accelerator: 'CmdOrCtrl+M',
role: 'minimize'
},
{
label: 'Close',
accelerator: 'CmdOrCtrl+W',
role: 'close'
},
]
},
{
label: 'Help',
role: 'help',
submenu: [
{
label: 'Learn More',
click: function() { require('electron').shell.openExternal('http://electron.atom.io') }
},
]
},
];
if (process.platform == 'darwin') {
var name = require('electron').remote.app.getName();
template.unshift({
label: name,
submenu: [
{
label: 'About ' + name,
role: 'about'
},
{
type: 'separator'
},
{
label: 'Services',
role: 'services',
submenu: []
},
{
type: 'separator'
},
{
label: 'Hide ' + name,
accelerator: 'Command+H',
role: 'hide'
},
{
label: 'Hide Others',
accelerator: 'Command+Alt+H',
role: 'hideothers'
},
{
label: 'Show All',
role: 'unhide'
},
{
type: 'separator'
},
{
label: 'Quit',
accelerator: 'Command+Q',
click: function() { app.quit(); }
},
]
});
// Window menu.
template[3].submenu.push(
{
type: 'separator'
},
{
label: 'Bring All to Front',
role: 'front'
}
);
}
var menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
類: Menu
new Menu()
創(chuàng)建一個新的菜單.
方法
菜單 類有如下方法:
Menu.setApplicationMenu(menu)
menuMenu
在 OS X 上設置應用菜單 menu . 在windows 和 linux，是為每個窗口都在其頂部設置菜單 menu.
Menu.sendActionToFirstResponder(action) OS X
actionString
發(fā)送 action 給應用的第一個響應器.這個用來模仿 Cocoa 菜單的默認行為，通常你只需要使用 MenuItem的屬性 role.
查看更多 OS X 的原生 action OS X Cocoa Event Handling Guide .
Menu.buildFromTemplate(template)
templateArray
一般來說，template 只是用來創(chuàng)建 MenuItem 的數(shù)組 參數(shù) .
你也可以向 template 元素添加其它東西，并且他們會變成已經(jīng)有的菜單項的屬性.
實例方法
menu 對象有如下實例方法
menu.popup([browserWindow, x, y, positioningItem])
browserWindowBrowserWindow (可選) - 默認為null.xNumber (可選) - 默認為 -1.yNumber (必須 如果x設置了) - 默認為 -1.positioningItemNumber (可選) OS X - 在指定坐標鼠標位置下面的菜單項的索引. 默認為 -1.
在 browserWindow 中彈出 context menu .你可以選擇性地提供指定的 x, y 來設置菜單應該放在哪里,否則它將默認地放在當前鼠標的位置.
menu.append(menuItem)
menuItemMenuItem
添加菜單項.
menu.insert(pos, menuItem)
posIntegermenuItemMenuItem
在制定位置添加菜單項.
menu.items()
獲取一個菜單項數(shù)組.
OS X Application 上的菜單的注意事項
相對于windows 和 linux, OS X 上的應用菜單是完全不同的style，這里是一些注意事項，來讓你的菜單項更原生化.
標準菜單
在 OS X 上，有很多系統(tǒng)定義的標準菜單，例如 Services and Windows 菜單.為了讓你的應用更標準化，你可以為你的菜單的 role 設置值，然后 electron 將會識別他們并且讓你的菜單更標準:
windowhelpservices
標準菜單項行為
OS X 為一些菜單項提供了標準的行為方法，例如 About xxx, Hide xxx, and Hide Others. 為了讓你的菜單項的行為更標準化，你應該為菜單項設置 role 屬性.
主菜單名
在 OS X ，無論你設置的什么標簽，應用菜單的第一個菜單項的標簽始終未你的應用名字.想要改變它的話，你必須通過修改應用綁定的 Info.plist 文件來修改應用名字.更多信息參考About Information Property List Files .
為制定瀏覽器窗口設置菜單 (Linux Windows)
瀏覽器窗口的[setMenu 方法][setMenu] 能夠設置菜單為特定瀏覽器窗口的類型.
菜單項位置
當通過 Menu.buildFromTemplate 創(chuàng)建菜單的時候，你可以使用 position and id 來放置菜單項.
MenuItem 的屬性 position 格式為 [placement]=[id]，placement 取值為 before, after, 或 endof 和 id， id 是菜單已經(jīng)存在的菜單項的唯一 ID:
before- 在對應引用id菜單項之前插入. 如果引用的菜單項不存在，則將其插在菜單末尾.after- 在對應引用id菜單項之后插入. 如果引用的菜單項不存在，則將其插在菜單末尾.endof- 在邏輯上包含對應引用id菜單項的集合末尾插入. 如果引用的菜單項不存在, 則將使用給定的id創(chuàng)建一個新的集合，并且這個菜單項將插入.
當一個菜檔項插入成功了，所有的沒有插入的菜單項將一個接一個地在后面插入.所以如果你想在同一個位置插入一組菜單項，只需要為這組菜單項的第一個指定位置.
例子
模板:
[
{label: '4', id: '4'},
{label: '5', id: '5'},
{label: '1', id: '1', position: 'before=4'},
{label: '2', id: '2'},
{label: '3', id: '3'}
]
菜單:
- 1
- 2
- 3
- 4
- 5
模板:
[
{label: 'a', position: 'endof=letters'},
{label: '1', position: 'endof=numbers'},
{label: 'b', position: 'endof=letters'},
{label: '2', position: 'endof=numbers'},
{label: 'c', position: 'endof=letters'},
{label: '3', position: 'endof=numbers'}
]
菜單:
- ---
- a
- b
- c
- ---
- 1
- 2
- 3
[setMenu]: http://www.15014759268.cn/electronmanual/electronmanual-browser-window.html
更多建議：