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

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

    
         
     
              
      
        
      
 
        
      
 
      
     
    
  
  
   1 
   2 
   3 
   4 
   5 
   6 
   7

#使应用最小化到托盘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();}  
  
   1 
   2 
   3 
   4 
   5 
   6 
   7 
   8 
   9 
   10 
   11 
   12 
   13 
   14 
   15 
   16 
   17 
   18 
   19 
   20 
   21 
   22 
   23 
   24 
   25 
   26

接下来我们需要在应用初始化时为自定义按钮绑定上述事件 (通过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();    #函数调用    })  
  
   1 
   2 
   3 
   4 
   5 
   6 
   7 
   8 
   9 
   10 
   11 
   12 
   13 
   14 
   15 
   16 
   17 
   18 
   19 
   20 
   21 
   22 
   23 
   24 
   25 
   26 
   27 
   28 
   29 
   30 
   31 
   32 
   33 
   34

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

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);     };  }  
  
   1 
   2 
   3 
   4 
   5 
   6 
   7 
   8 
   9 
   10 
   11 
   12 
   13 
   14 
   15 
   16 
   17 
   18 
   19 
   20 
   21 
   22 
   23 
   24 
   25 
   26 
   27 
   28