mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Update menu.md

Browse source 
1. add difference notice
2.  changed `render process` to `main process`
This commit is contained in:
Eric 2016-08-03 10:10:56 +08:00 committed by GitHub
parent 1fa18aeba2
commit 5ae112677b
1 changed files with 41 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
docs/api/menu.md
View file

@ -8,29 +8,26 @@ the `remote` module.
Each menu consists of multiple [menu items](menu-item.md) and each menu item can Each menu consists of multiple [menu items](menu-item.md) and each menu item can
have a submenu. have a submenu.
Below is an example of creating a menu dynamically in a web page ## Process Difference Notice
(render process) by using the [remote](remote.md) module, and showing it when
the user right clicks the page:
```html Due to Menu and MenuItem can be used in two processes, the way they are included is slightly different.
<!-- index.html -->
<script>
const {remote} = require('electron')
const {Menu, MenuItem} = remote;
const menu = new Menu() ### Main process
menu.append(new MenuItem({label: 'MenuItem1', click() { console.log('item 1 clicked') }})) ```
menu.append(new MenuItem({type: 'separator'})) const {Menu, MenuItem} = require('electron');
menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
menu.popup(remote.getCurrentWindow())
}, false)
</script>
``` ```
An example of creating the application menu in the render process with the ### Render process
```
const {remote} = require('electron')
const {Menu, MenuItem} = remote;
```
## Examples
### Main process
An example of creating the application menu in the main process with the
simple template API: simple template API:
```javascript ```javascript
@ -181,6 +178,31 @@ const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu) Menu.setApplicationMenu(menu)
``` ```
### Render process
Below is an example of creating a menu dynamically in a web page
(render process) by using the [remote](remote.md) module, and showing it when
the user right clicks the page:
```html
<!-- index.html -->
<script>
const {remote} = require('electron')
const {Menu, MenuItem} = remote;
const menu = new Menu()
menu.append(new MenuItem({label: 'MenuItem1', click() { console.log('item 1 clicked') }}))
menu.append(new MenuItem({type: 'separator'}))
menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
menu.popup(remote.getCurrentWindow())
}, false)
</script>
```
## Class: Menu ## Class: Menu
### `new Menu()` ### `new Menu()`