2.9node-webkit教程(9)native api 之Tray(托盤) · NW.js中文文檔

## 目錄 * 9.1 Tray簡介 * 9.2 tray的屬性 * 9.3 tray 的構造函數 * 9.4 初始化一個tray * 9.5 刪除tray * 9.6 小結 ## 9.1 Tray簡介 Tray在不同的平臺下的展現形式不一樣，通常以一個ICON的形式展現在操作系統狀態通知的位置。在Mac下稱之為Status Item，GTK環境下稱為Status Icon，windows叫系統托盤。新建tray.html 和package.json作為本文的示例程序。 tray.html內容如下： ~~~ <html> <head> <title>trayDemo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body > <h1>Tray 測試</h1> <script> // Load native UI library var gui = require('nw.gui'); </script> </body> </html> ~~~ package.json內容如下： ~~~ { "name": "tray-demo", "main": "tray.html", "nodejs":true, "window": { "title": "trayDemo", "toolbar": true, "width": 800, "height": 600, "resizable":true, "show_in_taskbar":true, "frame":true, "kiosk":false, "icon": "2655716405282662783.png" }, "webkit":{ "plugin":true } } ~~~ ## 9.2 tray的屬性 Tray包含title、tooltip、icon、menu、alticon五個屬性。 title屬性只在mac系統下有效，會和icon圖標一起顯示在狀態欄。 tooltip是當鼠標移動到tray上方時顯示的提示語，在所有平臺下都有效。 icon是tray顯示在托盤中的圖標。 menu是托盤中的菜單，是一個 gui.Menu對象（參考：[node-webkit教程6native-ui-api-之menu菜單](http://www.xuanhun521.com/Blog/2014/4/16/node-webkit%E6%95%99%E7%A8%8B6native-ui-api-%E4%B9%8Bmenu%E8%8F%9C%E5%8D%95)）。 alticon只有在mac下起作用，配置切換效果icon圖標。 ## 9.3 tray 的構造函數 ~~~ new Tray(option) ~~~ option中用來初始化tray的屬性值，但是只能配置title, tooltip, icon 和menu四個屬性。如： ~~~ var tray = new gui.Tray({ title: 'Tray', icon: 'img/icon.png' }); ~~~ 所有的屬性都可以通過對象直接獲取或賦值，如： ~~~ tray.menu = menu; ~~~ ## 9.4 初始化一個tray 現在我們修改tray.html： ~~~ <script> var isShowWindow = true; // Load native UI library var gui = require('nw.gui'); var win = gui.Window.get(); var tray = new gui.Tray({ title: '玄魂的軟件', icon: '2655716405282662783.png' }); tray.tooltip = '點此打開'; //添加一個菜單 var menu = new gui.Menu(); menu.append(new gui.MenuItem({ type: 'checkbox', label: '選擇我' })); tray.menu = menu; //click事件 tray.on('click', function() { if(isShowWindow) { win.hide(); isShowWindow = false; } else { win.show(); isShowWindow = true; } }); </script> ~~~ 運行效果如下： ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/211800504351736.png) ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/211800552797389.png) 點擊托盤中的圖標程序的窗體會相應的隱藏或者顯示。 ## 9.5 刪除tray 很可惜的是，現在還沒有辦法臨時隱藏Tray，只能刪除它。在刪除需要調用remove方法，然后設置為null。如： ~~~ tray.remove(); tray = null; ~~~ ## 9.6 小結本文內容主要參考node-webkit的官方英文文檔，做了適當的調整（[https://github.com/rogerwang/node-webkit/wiki/Tray](https://github.com/rogerwang/node-webkit/wiki/Tray)）。下一篇文章，介紹Tray。