package.json:
{ "main": "index.html", "name": "example", "window": { "toolbar": false, "frame" : false } }
index.html:
<!doctype html><html lang='en'><head> <meta charset='UTF-8'> <title>NodeWebkit Window Controls Example</title> <link rel='stylesheet' href='reset.css'> <link rel='stylesheet' href='style.css'> <script> var nw = require('nw.gui'); var win = nw.Window.get(); win.isMaximized = false; </script> </head><body> <header> <ul> <li><a href='#' title='Minimize' id='windowControlMinimize'></a></li><!-- --><li><a href='#' title='Maximize' id='windowControlMaximize'></a></li><!-- --><li><a href='#' title='Close' id='windowControlClose' ></a></li> </ul> </header> <script> // Min document.getElementById('windowControlMinimize').onclick = function() { win.minimize(); }; // Close document.getElementById('windowControlClose').onclick = function() { win.close(); }; // Max document.getElementById('windowControlMaximize').onclick = function() { if (win.isMaximized) win.unmaximize(); else win.maximize(); }; win.on('maximize', function(){ win.isMaximized = true; }); win.on('unmaximize', function(){ win.isMaximized = false; }); </script> </body></html>
reset.css:
/** * CSS Reset via http://meyerweb.com/eric/tools/css/reset/ */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
{ "main": "index.html", "name": "example", "window": { "toolbar": false, "frame" : false, "resizable":false // 不能生效 } }
使用 node-webkit v0.13.0-alpha2: (Jun 23, 2015, based off of IO.js v1.5.1, Chromium 43.0.2357.45)
"resizable":false //生效了