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 //生效了
时间： 2024-10-08 12:27:08