12-23 00:00
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 8 - Context Menus 본문

Programming/Web App

[WebApp / Node Webkit] Example 8 - Context Menus

cinema4dr12 2016. 2. 8. 11:33

목 차

 

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

Code

package.json

{
    "main": "index.html",
    "name": "context and window menus",
    "window": {
        "fullscreen": true
    }
}

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!doctype html>
 
<head>
    <meta charset='UTF-8'>
    <title>Context Menu Example</title>
 
    <script>
 
    var nw = require('nw.gui');
 
    // Tracking which element was clicked on
    var whichNode;
 
    // Context menu for paragraphs
    var paraMenu = new nw.Menu();
 
    // Context sub-menu for paragraph styles
    var paraStyleMenu = new nw.Menu();
 
    // [entry] Remove a paragraph
    paraMenu.append(new nw.MenuItem({
        label: 'Remove this paragraph',
        click: function() {
            whichNode.parentNode.removeChild(whichNode);
        }
    }));
 
    // Separator
    paraMenu.append(new nw.MenuItem({
        type: 'separator'
    }));
 
    // [entry] sub-menu
    paraMenu.append(new nw.MenuItem({
        label: 'Change Style',
        submenu: paraStyleMenu
    }));
 
    // [entry] Toggle bold
    paraStyleMenu.append(new nw.MenuItem({
        label: 'Toggle bold',
        click: function(){
            if (whichNode.style.fontWeight != 'bold')
                whichNode.style.fontWeight = 'bold';
            else
                whichNode.style.fontWeight = 'normal';
        }
    }));
 
    // [entry] Toggle red
    paraStyleMenu.append(new nw.MenuItem({
        label: 'Toggle red',
        click: function(){
            if (whichNode.style.color != 'red')
                whichNode.style.color = 'red';
            else
                whichNode.style.color = 'inherit';
        }
    }));
 
    </script>
 
</head>
 
 
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, id!</li>
        <li>Earum, perspiciatis est animi ab deserunt rerum eveniet eos doloremque.</li>
        <li>Itaque, voluptas consequatur quisquam natus vitae nihil ea praesentium culpa.</li>
        <li>Sapiente, eius eligendi voluptatum repellat assumenda enim delectus natus laboriosam!</li>
        <li>Corporis, non fugit nihil neque dolor sint accusamus incidunt perspiciatis!</li>
        <li>Nesciunt, mollitia quos ratione quis in vitae officia recusandae voluptatibus.</li>
    </ul>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, sed.</p>
    <p>Officia qui odit sed explicabo alias cumque consequuntur ullam optio?</p>
    <p>Culpa voluptates ea voluptas suscipit hic minus veniam laudantium nostrum!</p>
    <p>Commodi autem nulla blanditiis dolorem ipsa laboriosam nam neque officiis?</p>
    <p>Asperiores, maiores incidunt aliquam nostrum tempore modi nihil eius nam.</p>
    <p>Voluptate, error libero autem ipsam tempore ea non eaque aliquam.</p>
 
    <script>
 
    document.body.addEventListener('contextmenu', function(e) {
 
        e.preventDefault();
 
        if (e.target.localName == 'p')
        {
            whichNode = e.srcElement;
            paraMenu.popup(e.x, e.y);
        }
 
    });
 
    </script>
cs

Results

On Windows

On Mac OS



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

[WebApp / Node Webkit] Example 10 - Using Node Modules  (0) 2016.02.08
[WebApp / Node Webkit] Example 9 - Window Menus  (0) 2016.02.08
[WebApp / Node Webkit] Example 7 - Custom Window Control  (0) 2016.02.07
[WebApp / Node Webkit] Tutorials from nodehead  (0) 2016.01.31
[WebApp / Node Webkit] Example 6 - Tray Icon  (0) 2016.01.30
공유하기 링크
'Programming/Web App' Related Articles more
Comments