package.json:
1{ 2 "main": "index.html", 3 "name": "example", 4 "window": 5 { 6 "toolbar": false, 7 "frame" : false 8 } 9}
index.html:
1<!doctype html><html lang='en'><head> 2 <meta charset='UTF-8'> 3 <title>NodeWebkit Window Controls Example</title> 4 <link rel='stylesheet' href='reset.css'> 5 <link rel='stylesheet' href='style.css'> 6 7 <script> 8 9 var nw = require('nw.gui'); var win = nw.Window.get(); 10 win.isMaximized = false; </script> 11 12 </head><body> 13 14 <header> 15 <ul> 16 <li><a href='#' title='Minimize' id='windowControlMinimize'></a></li><!-- 17 --><li><a href='#' title='Maximize' id='windowControlMaximize'></a></li><!-- 18 --><li><a href='#' title='Close' id='windowControlClose' ></a></li> 19 </ul> 20 </header> 21 22 <script> 23 24 // Min 25 document.getElementById('windowControlMinimize').onclick = function() 26 { 27 win.minimize(); 28 }; // Close 29 document.getElementById('windowControlClose').onclick = function() 30 { 31 win.close(); 32 }; // Max 33 document.getElementById('windowControlMaximize').onclick = function() 34 { 35 if (win.isMaximized) 36 win.unmaximize(); else 37 win.maximize(); 38 }; 39 40 win.on('maximize', function(){ 41 win.isMaximized = true; 42 }); 43 44 win.on('unmaximize', function(){ 45 win.isMaximized = false; 46 }); </script> 47 48 </body></html>
reset.css:
1/** 2 * CSS Reset via http://meyerweb.com/eric/tools/css/reset/ 3 */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer,header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ margin: 0;padding: 0;border: 0;font-size: 100%; font: inherit;vertical-align: baseline; }article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display: block; }body{ line-height: 1; }ol, ul{ list-style: none; }blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after{ content: ''; content: none; }table{ border-collapse: collapse; border-spacing: 0; }a{ text-decoration: none; }
style.css:
@charset "UTF-8";/*Title Bar*/header{ width: 100%; height: 34px; background: -webkit-linear-gradient(top, rgb(255,255,255) 0, rgb(225,225,225) 100%); border-bottom: 1px solid rgb(205,205,205); -webkit-app-region: drag; -webkit-user-select: none; }/*Window Controls*/header>ul{ float: right; text-align: right; line-height: 0; padding-left: 6px; }header>ul>li,header>ul>li>a{ display: inline-block; }header>ul{ float: right; }header>ul>li>a{ width: 22px; height: 22px; margin: 6px 6px 6px 0; background-image: url('./icons.svg'); background-repeat: no-repeat; -webkit-transition: -webkit-transform 200ms; -webkit-app-region: no-drag; }header>ul>li>a:hover,header>ul>li>a:focus{ -webkit-transform: scale(1.22,1.22); outline: none; }a#windowControlClose{ background-position: -44px 0; }a#windowControlMaximize{ background-position: -22px 0; }a#windowControlMinimize{ background-position: 0 0; }
以上就是简单拖动的例子，文件创建好后，把所有文件拷贝到nwjs 解压目录下，运行nw.exe就可以了
这个例子转自
http://nodehead.com/node-webkit-custom-window-controls-26/
问题：
我们开发时使用的是 node-webkit v0.12.2: (May 22, 2015, based off of IO.js v1.2.0, Chromium 41.0.2272.76) 版本
package.json
1{ 2 "main": "index.html", 3 "name": "example", 4 "window": 5 { 6 "toolbar": false, 7 "frame" : false, 8 "resizable":false // 不能生效 9 } 10}
使用 node-webkit v0.13.0-alpha2: (Jun 23, 2015, based off of IO.js v1.5.1, Chromium 43.0.2357.45)
"resizable":false //生效了