node-webkit 拖动效果和问题

原创
2015/07/27 17:39
阅读数 1.2K

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 //生效了


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部