|
參照自:https://www.cnblogs.com/xuanhun/p/3678943.html Tray包含title、tooltip、icon、menu、alticon五個屬性。 title屬性只在mac系統(tǒng)下有效,會和icon圖標一起顯示在狀態(tài)欄。 tooltip是當鼠標移動到tray上方時顯示的提示語,在所有平臺下都有效。 icon是tray顯示在托盤中的圖標。 menu是托盤中的菜單,是一個 gui.Menu對象(參考:node-webkit教程6native-ui-api-之menu菜單)。 alticon只有在mac下起作用,配置切換效果icon圖標。 nwjs文件如下
其中package.nw目錄文件如下:
img文件里面放的是icon.png 來不及解釋了,上碼 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": "./img/icon.png"
},
"webkit":{
"plugin":true
}
}tray.html <html>
<head>
<title>Feynman工具</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<h1>Feynman工具 Tray 測試</h1>
<script>
// Load native UI library
var isShowWindow = true;
// Load native UI library
var gui = require('nw.gui');
var win = gui.Window.get();
var tray = new gui.Tray({ title: 'Feynman工具', icon: './img/icon.png' });
tray.tooltip = 'Feynman工具';
//添加一個菜單
var menu = new gui.Menu();
menu.append(new gui.MenuItem({ type: 'normal', label: '退出',click: function(){
if(confirm("確定退出Feynman工具嗎?")){
win.close(true);
}
} }));
tray.menu = menu;
//click 托盤圖標事件
tray.on('click',
function()
{
if(isShowWindow)
{
win.hide();
isShowWindow = false;
}
else
{
win.show();
isShowWindow = true;
}
}
);
win.on('close', function () {
win.hide();
});
</script>
</body>
</html>注意icon.png最好是128x128png格式的圖片,否則可能會顯示不出來。 最后啟動nw.exe,看看效果 來源:https://www./content-1-596201.html |
|
|