NODE-WEBKIT教程(6)NATIVE UI API 之MENU(菜單)
文/玄魂html
目錄html5
node-webkit教程(6)Native UI API 之Menu(菜單)node
前言ios
6.1 Menu 概述git
6.2 menu apigithub
6.2.1 new Menu([option])web
6.2.2 Menu.itemsjson
6.2.3 Menu.items.lengthubuntu
6.2.4 Menu.items[i]windows
6.2.5 Menu.append(MenuItem item)
6.2.6 Menu.insert(MenuItem item, int i)
6.2.7 Menu.remove(MenuItem item)
6.2.8 Menu.removeAt(int i)
6.2.9 Menu.item[x].click
6.2.10 Menu.popup(int x, int y)
6.3 建立右鍵菜單
6.4 MenuItem
6.4.1 new MenuItem(option)
6.4.2 MenuItem.type
6.4.3 MenuItem.label
6.4.4 MenuItem.icon
6.4.5 MenuItem.tooltip
6.4.6 MenuItem.checked
6.4.7 MenuItem.enabled
6.4.8 MenuItem.submenu
6.4.9 MenuItem.click
6.6 小結
幾個月前，要開發一個簡易的展現應用，要求支持離線播放（桌面應用）和在線播放（web應用）。
當時第一想到的是flex，同一套代碼（或者只需少許的更改）就能夠同時運行在桌面和瀏覽器上。因爲不少展示效果要全新開發，我想到了impress.js(https://github.com/bartaz/impress.js/)。若是選擇impress.js，就意味着要將html5做爲桌面應用，當時想到要封裝webkit，可是本人對這方面也不是很熟悉，時間也頗有限，就又沿着這個方向搜索，找到了node-webkit(https://github.com/rogerwang/node-webkit)。
node-webkit解決了我經過html和js來編寫桌面應用的難題。
至於node-webkit的定義，按照做者的說法：
「 基於node.js和chromium的應用程序實時運行環境，可運行經過HTML(5)、CSS(3)、Javascript來編寫的本地應用程序。node.js和webkit的結合體，webkit提供DOM操做，node.js提供本地化操做；且將兩者的context徹底整合，可在HTML代碼中直接使用node.js的API。」
Menu API 提供的是本地化的窗口菜單，即windows下常說的菜單欄，定義的菜單顯示在本地化（native）window上，而不是屬於DOM文檔。參考：node-webkit學習(4)Native UI API 之window（http://www.xuanhun521.com/Blog/2014/4/14/node-webkit%E5%AD%A6%E4%B9%A04native-ui-api-%E4%B9%8Bwindow）
Menu分爲兩種，window菜單和上下文（右鍵）菜單（context menu）。
建立menu對象使用構造函數Menu([option])，如：
// Load native UI library
var gui = require('nw.gui');
// Create an empty menu
var menu = new gui.Menu();
不帶參數構造的menu屬於context menu，若是想建立window menu，使用以下方式：
var your_menu = new gui.Menu({ type: 'menubar' });
將window menu直接賦值給window 對象的menu屬性便可生效。
gui.Window.get().menu = your_menu;
建立menuDemo.html和package.json。menuDemo.html代碼以下：
<html>
<head>
<title>menuDemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<h1>menu api 測試</h1>
<script>
// Load native UI library
var gui = require('nw.gui');
var win = gui.Window.get();
//建立window menu
var windowMenu = new gui.Menu({ type: 'menubar' });
var windowSubmenu = new gui.Menu();
var subMenuItem = new gui.MenuItem({ label: '子菜單項' });
windowSubmenu.append(subMenuItem);
windowMenu.append(
new gui.MenuItem({ label: '子菜單', submenu: windowSubmenu })
);
win.menu = windowMenu;
// Create an empty menu
var menu = new gui.Menu();
// Add some items
menu.append(new gui.MenuItem({ label: 'Item A' }));
menu.append(new gui.MenuItem({ label: 'Item B' }));
menu.append(new gui.MenuItem({ type: 'separator' }));
menu.append(new gui.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) {
var element = document.createElement('div');
element.appendChild(document.createTextNode(menu.items[i].label));
document.body.appendChild(element);
}
</script>
</body>
</html>
package.json文件內容以下：
{
"name": "menu-demo",
"main": "menuDemo.html",
"nodejs":true,
"width":100,
"height":200,
"window": {
"title": "MenuDemo",
"toolbar": true,
"width": 800,
"height": 600,
"resizable":true,
"show_in_taskbar":true,
"frame":true,
"kiosk":false
},
"webkit":{
"plugin":true
}
}
運行結果以下：
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）
構造函數，見上文。
獲取該Menu下全部的MenuItem對象，返回結果爲數組。上文中的例子，有這樣的代碼：
for (var i = 0; i < menu.items.length; ++i) {
var element = document.createElement('div');
element.appendChild(document.createTextNode(menu.items[i].label));
document.body.appendChild(element);
}
上面的代碼經過menu.items獲取全部menuitem對象，遍歷輸出label。這裏須要注意的是，並非全部的menuitem都有label屬性。
menuitem的個數。參加上文demo。
經過索引返回一個menuitem對象。
向當前菜單中添加一個menuitem對象，該對象在整個menuitem集合的尾部。
在menuitem集合的指定位置插入一個menuitem對象。
從menuitem集合中移除一個menuitem對象。
刪除menuitem集合中指定位置的menuitem對象。
設置menuitem集合中指定位置的menuitem對象的click事件，在menuDemo.html中添加以下代碼：
menu.items[0].click = function() {
var element = document.createElement('div');
element.appendChild(document.createTextNode(‘我被點擊了’));
document.body.appendChild(element);
};
結果以下：
點擊前
點擊後
在當前窗口的指定位置彈窗菜單。示例代碼見上文。
建立右鍵菜單，須要在頁面監聽contextmenu 事件，而後控制彈出菜單。修改以前的菜單彈出代碼：
document.body.addEventListener('contextmenu', function (ev) {
ev.preventDefault();
menu.popup(10, 10);
return false;
});
啓動時頁面以下：
單擊右鍵後，界面顯示菜單：
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）
從上面的敘述中，咱們已經知道，menu和menuitem的一塊兒組合，才能最終組成界面上的菜單。到目前爲止，咱們已經基本瞭解了menuitem的基本使用方法，下面根據api文檔，詳細介紹屬性、方法和事件。
初始化一個Menuitem對象，其中option是一個對象，包含label, icon, tooltip, type, click, checked, enabled 和 submenu這些字段。這些字段都具備本身的屬性，下面分別敘述。
獲取一個menuitem的類別信息，到目前爲止有三類menuitem，分別爲separator, checkbox 和normal。
normal和separator類型的menuitem咱們都已經在上面的示例中見到，下面咱們添加一個checkbox類型的menuitem。
menu.append(new gui.MenuItem({ label: '請選擇',type:'checkbox' }));
結果以下：
須要注意的是，type字段只能在初始化時設定，在運行時是不能修改menuitem的類型的。
獲取或設置menuitem的label值，目前只支持純文本。
菜單的圖標，支持app內部的相對路徑和系統路徑。sepatater類型的menuitem不支持icon屬性。只支持png格式的圖片。
修改sumMenuItem，爲它添加icon：
var subMenuItem = new gui.MenuItem({ label: '子菜單項', icon: '2655716405282662783.png' });
效果以下：
或者或者設置tooltip字段。所謂tooltip就是當鼠標滑動到菜單上顯示的文本信息，相似於DOM元素中的title。
下面咱們繼續修改subMenuItem，爲其添加tooltip：
var subMenuItem = new gui.MenuItem({ label: '子菜單項', icon: '2655716405282662783.png',tooltip:'我是帥氣的子菜單' });
很不幸，在個人windows 7機器上，tooltip沒法顯示。在ubuntu上，menubar是顯示在全局菜單上，看起來有點怪異：
獲取或設置menuitem是否被選中。
獲取或者menuitem的enaled屬性，enabled設置爲false的menuitem不可被選中。
獲取或者是子菜單。能夠參考本文的示例。
獲取或設置click事件的回調函數。
本文內容主要參考node-webkit的官方英文文檔（https://github.com/rogerwang/node-webkit/wiki/Menu，https://github.com/rogerwang/node-webkit/wiki/MenuItem，https://github.com/rogerwang/node-webkit/wiki/Window-menu）。
下一篇文章，介紹Platform Services。
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）
更多相關內容，歡迎訪問玄魂的博客(更多node-webkit相關內容 http://www.xuanhun521.com/Blog/Tag/node-webkit)
ps：nw.js，electron交流羣 313717550
- 1. Android系列之UI組件----Menu菜單
- 2. [譯][Tkinter 教程14] menu 菜單
- 3. 玩轉Android---UI篇---Menu（菜單）
- 4. Menu菜單(一)
- 5. Menu菜單欄
- 6. Java：菜單（Menu）
- 7. Menu 菜單欄
- 8. Android 菜單 Menu
- 9. Menu---android菜單（menu）用法
- 10. yii2 rbac權限控制之菜單menu詳細教程
- 更多相關文章...
- • Eclipse 菜單 - Eclipse 教程
- • ionic 側欄菜單 - ionic 教程
- • Java 8 Stream 教程
- • Github 簡明教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。