From eba65eb4d30f40b6d0ea3db32117ac36194720d4 Mon Sep 17 00:00:00 2001 From: Weiqiang Lin <23leo@163.com> Date: Thu, 9 Feb 2017 17:34:45 +0800 Subject: [PATCH] Class: Menu to zh-CN --- docs-translations/zh-CN/api/menu.md | 481 +++++++++++++++------------- 1 file changed, 253 insertions(+), 228 deletions(-) diff --git a/docs-translations/zh-CN/api/menu.md b/docs-translations/zh-CN/api/menu.md index 07736d4bbd2b..0baddba1da9c 100644 --- a/docs-translations/zh-CN/api/menu.md +++ b/docs-translations/zh-CN/api/menu.md @@ -1,215 +1,31 @@ -# 菜单 +# 类:菜单 -`menu` 类可以用来创建原生菜单,它可用作应用菜单和 -[context 菜单](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/PopupGuide/ContextMenus). +> 创建原生的应用菜单和 context 菜单。 -这个模块是一个主进程的模块,并且可以通过 `remote` 模块给渲染进程调用. - -每个菜单有一个或几个菜单项 [menu items](menu-item.md),并且每个菜单项可以有子菜单. - -下面这个例子是在网页(渲染进程)中通过 [remote](remote.md) 模块动态创建的菜单,并且右键显示: - -```html - - -``` - -例子,在渲染进程中使用模板api创建应用菜单: - -```javascript -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 () { - return (process.platform === 'darwin') ? 'Ctrl+Command+F' : '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 +进程: [Main](../glossary.md#main-process) ### `new Menu()` -创建一个新的菜单. +创建一个新的菜单。 -## 方法 +### 静态方法 -`菜单` 类有如下方法: +`菜单` 类有如下静态方法: -### `Menu.setApplicationMenu(menu)` +#### `Menu.setApplicationMenu(menu)` * `menu` Menu -在 macOS 上设置应用菜单 `menu` . -在windows 和 linux,是为每个窗口都在其顶部设置菜单 `menu`. +在 macOS 上设置应用菜单 `menu`。 +在 windows 和 linux,是为每个窗口都在其顶部设置菜单 `menu`。 -### `Menu.sendActionToFirstResponder(action)` _macOS_ +**注意:** 这个API必须在 `app` 模块的 `ready` 事件后调用。 + +#### `Menu.getApplicationMenu()` + +返回 `Menu` - 应用程序菜单,设置、 `null` 、或未设置。 + +#### `Menu.sendActionToFirstResponder(action)` _macOS_ * `action` String @@ -217,19 +33,21 @@ Menu.setApplicationMenu(menu) 查看更多 macOS 的原生 action [macOS Cocoa Event Handling Guide](https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/EventOverview/EventArchitecture/EventArchitecture.html#//apple_ref/doc/uid/10000060i-CH3-SW7) . -### `Menu.buildFromTemplate(template)` +#### `Menu.buildFromTemplate(template)` -* `template` Array +* `template` MenuItemConstructorOptions[] -一般来说,`template` 只是用来创建 [MenuItem](menu-item.md) 的数组 `参数` . +返回 `Menu` -你也可以向 `template` 元素添加其它东西,并且他们会变成已经有的菜单项的属性. +一般来说,`template` 只是用来创建 [MenuItem](menu-item.md) 的数组 `参数`。 -##实例方法 +你也可以向 `template` 元素添加其它东西,并且他们会变成已经有的菜单项的属性。 + +### 实例方法 `menu` 对象有如下实例方法 -### `menu.popup([browserWindow, x, y, positioningItem])` +#### `menu.popup([browserWindow, x, y, positioningItem])` * `browserWindow` BrowserWindow (可选) - 默认为 `null`. * `x` Number (可选) - 默认为 -1. @@ -239,31 +57,239 @@ Menu.setApplicationMenu(menu) 在 `browserWindow` 中弹出 context menu .你可以选择性地提供指定的 `x, y` 来设置菜单应该放在哪里,否则它将默认地放在当前鼠标的位置. -### `menu.append(menuItem)` +#### `menu.append(menuItem)` * `menuItem` MenuItem -添加菜单项. +添加菜单项。 -### `menu.insert(pos, menuItem)` +#### `menu.insert(pos, menuItem)` * `pos` Integer * `menuItem` MenuItem -在制定位置添加菜单项. +在指定位置添加菜单项。 -### `menu.items()` +### 实例属性 -获取一个菜单项数组. +`menu` 对象拥有以下属性: + +#### `menu.items()` + +获取一个菜单项数组。 + +## 例子 + +`Menu` 类只能在主进程中使用,但你也可以 +在渲染过程中通过 [`remote`](remote.md) 模块使用它。 + +### 主进程 + +在主进程中创建应用程序菜单的示例 +简单模板API: + +```javascript +const {app, Menu} = require('electron') + +const template = [ + { + label: 'Edit', + submenu: [ + { + role: 'undo' + }, + { + role: 'redo' + }, + { + type: 'separator' + }, + { + role: 'cut' + }, + { + role: 'copy' + }, + { + role: 'paste' + }, + { + role: 'pasteandmatchstyle' + }, + { + role: 'delete' + }, + { + role: 'selectall' + } + ] + }, + { + label: 'View', + submenu: [ + { + role: 'reload' + }, + { + role: 'forcereload' + }, + { + role: 'toggledevtools' + }, + { + type: 'separator' + }, + { + role: 'resetzoom' + }, + { + role: 'zoomin' + }, + { + role: 'zoomout' + }, + { + type: 'separator' + }, + { + role: 'togglefullscreen' + } + ] + }, + { + role: 'window', + submenu: [ + { + role: 'minimize' + }, + { + role: 'close' + } + ] + }, + { + role: 'help', + submenu: [ + { + label: 'Learn More', + click () { require('electron').shell.openExternal('http://electron.atom.io') } + } + ] + } +] + +if (process.platform === 'darwin') { + template.unshift({ + label: app.getName(), + submenu: [ + { + role: 'about' + }, + { + type: 'separator' + }, + { + role: 'services', + submenu: [] + }, + { + type: 'separator' + }, + { + role: 'hide' + }, + { + role: 'hideothers' + }, + { + role: 'unhide' + }, + { + type: 'separator' + }, + { + role: 'quit' + } + ] + }) + // Edit menu. + template[1].submenu.push( + { + type: 'separator' + }, + { + label: 'Speech', + submenu: [ + { + role: 'startspeaking' + }, + { + role: 'stopspeaking' + } + ] + } + ) + // Window menu. + template[3].submenu = [ + { + label: 'Close', + accelerator: 'CmdOrCtrl+W', + role: 'close' + }, + { + label: 'Minimize', + accelerator: 'CmdOrCtrl+M', + role: 'minimize' + }, + { + label: 'Zoom', + role: 'zoom' + }, + { + type: 'separator' + }, + { + label: 'Bring All to Front', + role: 'front' + } + ] +} + +const menu = Menu.buildFromTemplate(template) +Menu.setApplicationMenu(menu) +``` + +### 渲染进程 + +以下是通过使用 [`remote`](remote.md) 模块在网页(渲染进程)中动态创建菜单的示例 +,并在用户点击右键时显示: + +```html + + +``` ## macOS Application 上的菜单的注意事项 -相对于windows 和 linux, macOS 上的应用菜单是完全不同的style,这里是一些注意事项,来让你的菜单项更原生化. +相对于 windows 和 linux, macOS 上的应用菜单是完全不同的 style,这里是一些注意事项,来让你的菜单项更原生化。 ### 标准菜单 -在 macOS 上,有很多系统定义的标准菜单,例如 `Services` and -`Windows` 菜单.为了让你的应用更标准化,你可以为你的菜单的 `role` 设置值,然后 electron 将会识别他们并且让你的菜单更标准: +在 macOS 上,有很多系统定义的标准菜单,例如 `Services` and +`Windows` 菜单.为了让你的应用更标准化,你可以为你的菜单的 `role` 设置值,然后 Electron 将会识别他们并且让你的菜单更标准: * `window` * `help` @@ -271,29 +297,29 @@ Menu.setApplicationMenu(menu) ### 标准菜单项行为 -macOS 为一些菜单项提供了标准的行为方法,例如 `About xxx`, -`Hide xxx`, and `Hide Others`. 为了让你的菜单项的行为更标准化,你应该为菜单项设置 `role` 属性. +macOS 为一些菜单项提供了标准的行为方法,例如 `About xxx`, +`Hide xxx`,和 `Hide Others`. 为了让你的菜单项的行为更标准化,你应该为菜单项设置 `role` 属性。 ### 主菜单名 -在 macOS ,无论你设置的什么标签,应用菜单的第一个菜单项的标签始终未你的应用名字.想要改变它的话,你必须通过修改应用绑定的 `Info.plist` 文件来修改应用名字.更多信息参考[About Information -Property List Files][AboutInformationPropertyListFiles] . +在 macOS ,无论你设置的什么标签,应用菜单的第一个菜单项的标签始终未你的应用名字。想要改变它的话,你必须通过修改应用绑定的 `Info.plist` 文件来修改应用名字,更多信息参考 [About Information +Property List Files][AboutInformationPropertyListFiles] 。 ## 为制定浏览器窗口设置菜单 (*Linux* *Windows*) -浏览器窗口的[`setMenu` 方法][setMenu] 能够设置菜单为特定浏览器窗口的类型. +浏览器窗口的 [`setMenu` 方法][setMenu] 能够设置菜单为特定浏览器窗口的类型。 ## 菜单项位置 -当通过 `Menu.buildFromTemplate` 创建菜单的时候,你可以使用 `position` and `id` 来放置菜单项. +当通过 `Menu.buildFromTemplate` 创建菜单的时候,你可以使用 `position` and `id` 来放置菜单项。 -`MenuItem` 的属性 `position` 格式为 `[placement]=[id]`,`placement` 取值为 `before`, `after`, 或 `endof` 和 `id`, `id` 是菜单已经存在的菜单项的唯一 ID: +`MenuItem` 的属性 `position` 格式为 `[placement]=[id]`,`placement` 取值为 `before`, `after`, 或 `endof` 和 `id`, `id` 是菜单已经存在的菜单项的唯一 ID: -* `before` - 在对应引用id菜单项之前插入. 如果引用的菜单项不存在,则将其插在菜单末尾. -* `after` - 在对应引用id菜单项之后插入. 如果引用的菜单项不存在,则将其插在菜单末尾. -* `endof` - 在逻辑上包含对应引用id菜单项的集合末尾插入. 如果引用的菜单项不存在, 则将使用给定的id创建一个新的集合,并且这个菜单项将插入. +* `before` - 在对应引用id菜单项之前插入。如果引用的菜单项不存在,则将其插在菜单末尾。 +* `after` - 在对应引用id菜单项之后插入。如果引用的菜单项不存在,则将其插在菜单末尾。 +* `endof` - 在逻辑上包含对应引用id菜单项的集合末尾插入。如果引用的菜单项不存在, 则将使用给定的id创建一个新的集合,并且这个菜单项将插入。 -当一个菜档项插入成功了,所有的没有插入的菜单项将一个接一个地在后面插入.所以如果你想在同一个位置插入一组菜单项,只需要为这组菜单项的第一个指定位置. +当一个菜档项插入成功了,所有的没有插入的菜单项将一个接一个地在后面插入。所以如果你想在同一个位置插入一组菜单项,只需要为这组菜单项的第一个指定位置。 ### 例子 @@ -346,5 +372,4 @@ Property List Files][AboutInformationPropertyListFiles] . ``` [AboutInformationPropertyListFiles]: https://developer.apple.com/library/ios/documentation/general/Reference/InfoPlistKeyReference/Articles/AboutInformationPropertyListFiles.html -[setMenu]: -https://github.com/electron/electron/blob/master/docs/api/browser-window.md#winsetmenumenu-linux-windows +[setMenu]: https://github.com/electron/electron/blob/master/docs/api/browser-window.md#winsetmenumenu-linux-windows