您的位置:首页 > 移动开发

nwjs(node-webkit)桌面app自定义窗体事件、nwjs托盘tray的实现

2017-08-06 00:00 381 查看

自定义窗体按钮及事件绑定

假设我们在配置app的时候去掉了默认的窗体外框及事件并且打算自己定制,那么我们首先要在应用页面通过html布局各个窗体按钮,假设我们通过以下的代码自定义了窗体最小化、最大化、后台运行按钮

<div class="windowHandle">
<ul class="nav navbar-nav pull-right">
<li id="min-btn"><a href="javascript:void(0)"><span class="glyphicon glyphicon-minus-sign"></span></a></li>
<li id="max-btn"> <a href="javascript:void(0)"><span class="glyphicon glyphicon-plus-sign"></span></a></li>
<li id="close-btn"> <a href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a></li>
</u>
</div>




然后我们定义了相关按钮的点击事件:

#使应用最小化到托盘
function backgroudApp(gui){
win.hide();
}
#使应用最小化到任务栏
function minimizeApp(gui){
win.on('minimize', function () {
win.removeAllListeners('minimize');
});
win.minimize();
}
#最大化应用
function expendApp(gui){
win.on('maximize', function () {
win.removeAllListeners('maximize');
});
win.maximize();
}
#toggle窗体最小化和最大化
function unexpendApp(gui){
win.on('restore', function () {
win.removeAllListeners('restore');
});

win.restore();
}


接下来我们需要在应用初始化时为自定义按钮绑定上述事件 (通过jQuery绑定)

#首先加载gui模块并且获得窗体组件
var gui = require('nw.gui');
var win = gui.Window.get();
#定义立即执行的匿名函数
(function(){
#窗体展现
win.show();
#托盘事件
showTray(gui);
var ismaxmize = true;
#通过函数表达式定义函数
var windowEvent = function() {
#为关闭按钮绑定事件
$("#close-btn").click(function() {
closeApp();
});
#为最小化按钮绑定事件
$("#min-btn").click(function() {
minimizeApp(gui);
});
#最大化按钮的事件绑定以及toggle绑定
$("#max-btn").click(function() {
if (ismaxmize) {
expendApp(gui);
ismaxmize = false;
} else {
unexpendApp(gui);
ismaxmize = true;
}
});
}
windowEvent();
#函数调用
})


应用的托盘事件以及托盘操作设置

function showTray(gui){
#获取应用目录
dirname = require('./util').dirname;
#获取托盘图片位置
var path_ = pathModule.join(dirname, 'images/halo.png');
#创建托盘
tray = new gui.Tray({title: 'halo', icon:path_ });
tray.tooltip = 'halo';
//添加一个菜单
var menu = new gui.Menu();
menu.append(new gui.MenuItem({label: ' 退     出', icon:path_,}));
tray.menu = menu;
#托盘点击事件
tray.on('click', function() {
win.show();
});
win.on('close', function (event) {
});
tray.menu.items[0].click = function() {
win.hide();
#在这一部分可以添加应用的终结执行命令
tray.remove();
tray = null;
win.removeAllListeners('close');
gui.App.quit();
this.close(true);
};
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: