12-23 03:50
Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

Scientific Computing & Data Science

[WebApp / Node Webkit] Example 7 - Custom Window Control 본문

Programming/Web App

[WebApp / Node Webkit] Example 7 - Custom Window Control

cinema4dr12 2016. 2. 7. 21:56

시리즈 목차

 

이번 글에서는 Custom Window Controller를 생성하는 방법을 알아보도록 하겠다.

Code

package.json

{
    "main": "index.html",
    "name": "custom window control",
    "window":
    {
        "toolbar": false,
        "frame"  : false,
        "fullscreen": true
    }
}


reset.css

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
35
36
37
38
/**
 * 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;
}
 
cs


style.css

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@charset "UTF-8";
/*Title Bar*/
header{
    width:         100%;
    height:         34px;
    background:    -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(150,150,150) 100%);
    border-bottom: 1px solid rgb(205,205,205);
    -webkit-app-region: drag;
    -webkit-user-select: none;
}
body{
    width:         100%;
    height:        1000px;
    background:    -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(150,150,150) 100%);
    background-repeat:  no-repeat;
}
/*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>li>a{
    width:              22px;
    height:             22px;
    margin:              6px 6px 6px 0;
    background-image:   url('./icons/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;
}
cs


index.html

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!doctype html>
 
<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>
 
 
    <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>
cs

Results

On Windows

On Mac OS

 

Download icons.svg below:


'Programming > Web App' 카테고리의 다른 글

[WebApp / Node Webkit] Example 9 - Window Menus  (0) 2016.02.08
[WebApp / Node Webkit] Example 8 - Context Menus  (0) 2016.02.08
[WebApp / Node Webkit] Tutorials from nodehead  (0) 2016.01.31
[WebApp / Node Webkit] Example 6 - Tray Icon  (0) 2016.01.30
[WebApp / Node Webkit] Example 5 - Submenu  (0) 2016.01.30
공유하기 링크
'Programming/Web App' Related Articles more
Comments