nw.js node-webkit系列(11)Native UI API Tray的使用

本文介绍如何使用nw.gui库在不同操作系统上创建统一的托盘图标应用程序,包括托盘图标的基本操作如显示提示、关联菜单等,并提供了一个简单的示例代码。

托盘在不同操作系统下有不同控制的抽象。它通常存在于系统的通知区域,在苹果系统成为状态项,在GTK称为状态图标,在Window系统下称为系统托盘图标。

(一)例子

<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: '1.png'
	});
	tray.tooltip = '点此打开';
	//添加一个菜单
	var menu = new gui.Menu();
	menu.append(new gui.MenuItem({
		type: 'checkbox',
		label: 'box1'
	}));
	menu.append(new gui.MenuItem({
		label: '退出',
		click: function() {
			tray.remove();
			tray = null;
			win.close();
		}
	}));
	tray.menu = menu;
	//click事件
	tray.on('click',
		function() {
			if (isShowWindow) {
				win.hide();
				isShowWindow = false;
			} else {
				win.show();
				isShowWindow = true;
			}
		}
	);
</script>

(二)函数参考

new Tray(option)

创建一个托盘,option是初始化托盘的对象,属性包括title, tooltip, icon 和 menu.

注意:每个应用智能创建一个托盘。


Tray.title

获取或设置托盘的名称。这个属性目前只对苹果系统有限,会和状态项在一起显示在苹果系统状态栏中。对GTK和Window没有效果,在这两个系统中只显示托盘图标。


Tray.tooltip

获取或设置托盘的tooltip,及鼠标移到托盘处显示的介绍文字。


Tray.icon

获取或设置托盘图标。图标需指向一个图标路径,可以是应用的相对路径,也可以是系统的绝对路径。


Tray.alticon

获取或设置备用托盘。只对苹果系统有效。


Tray.menu

获取或设置托盘菜单栏。当你点击到托盘时,将会显示菜单栏。

在苹果系统中你需要点击图盘才会显示。而在Windows 和 Linux中,你只需要右击托盘即可显示。


Tray.remove()

移除托盘。一旦移除托盘,记得要把托盘对象设为null



最后,补充一下,托盘目前只支持click事件。点击托盘时可根据应用做出相应的响应。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值