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

# node-webkit教程(9)native api 之Tray(托盤) > 作者：玄魂 > 來源：[node-webkit教程(9)native api 之Tray(托盤)](http://www.cnblogs.com/xuanhun/p/3678943.html) ## 目錄 + 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> ``` 運行效果如下： ![](img/211800504351736.png) ![](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。