當前位置: 華文世界 > 科技

HTML 也能開發桌面軟件之 NW.js 中的托盤圖示

2024-09-06科技

在前端的系列教程中我們已經向大家介紹了如下系列文章了:
01)NW.js 是什麽?
02)NW.js 中的配置指南
03)NW.js 中的 App 應用程式類
04)NW.js 中的 Window 表單類
05)NW.js 中的 Menu 選單類
現在我們接著為大家介紹 NW.js 類別庫中的 托盤選單 類。

Tray 類的基本介紹

Tray 是 NW.js 類別庫中用於建立系統托盤圖示的功能類。系統托盤通常位於桌面作業系統的工作列或選單欄上,允許使用者快速存取應用程式的某些功能,即使應用程式視窗沒有開啟或最小化。

類名

簡短說明

Tray

用於建立和管理系統托盤圖示的類

Tray 類的成員明細

內容明細:

內容

說明

tray.title

標題

tray.tooltip

工具提示

tray.icon

圖示

tray.alticon (Mac)

替代圖示(Mac)

tray.iconsAreTemplates (Mac)

圖示是否為樣版(Mac)

tray.menu

選單

方法明細:

方法

說明

tray.remove()

移除托盤項

事件明細:

事件

說明

Event: click

點選事件

Tray 類的程式碼例項

配置檔

01)所屬檔:`package.json`
02) 檔內容:

{ "name": "my-nw-app", "main": "index.html"}

頁面檔

01)所屬檔:`index.html`
02)檔內容:

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>NW.js 托盤範例</title></head><body> <p>NW.js 托盤範例</p> <p>此視窗可以被隱藏。請檢視選單欄中的托盤圖示。</p> <script> // 確保nw.gui已載入 var gui = require('nw.gui'); // 獲取當前視窗 var win = gui.Window.get(); // 建立一個托盤圖示 var tray = new gui.Tray({ title: 'NW.js 套用', icon: 'icon.png' // 確保在套用目錄中有一個名為icon.png的圖示檔 }); // 建立選單 var menu = new gui.Menu(); // 添加選單項 menu.append(new gui.MenuItem({ type: 'normal', label: '顯示視窗', click: function() { win.show(); win.focus(); } })); menu.append(new gui.MenuItem({ type: 'separator' })); menu.append(new gui.MenuItem({ type: 'normal', label: '結束', click: function() { gui.App.quit(); } })); // 將選單附加到托盤 tray.menu = menu; // 允許視窗最小化到托盤 win.on('minimize', function() { this.hide(); }); // 允許關閉按鈕最小化到托盤 win.on('close', function() { this.hide(); return false; }); </script></body></html>

執行截圖