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 5 - Submenu 본문

Programming/Web App

[WebApp / Node Webkit] Example 5 - Submenu

cinema4dr12 2016. 1. 30. 15:12

시리즈 목차


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


Codes

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Context Menu</title>
</head>
<body style="width: 100%; height: 100%;">

<p>'Right click' to show context menu.</p>

<script>
// Create an empty context menu
var nw = require('nw.gui');
var menu = new nw.Menu();
var submenu = new nw.Menu();

// Create a normal item with label and icon
var item = new nw.MenuItem({
  type: "normal", 
  label: "I'm a menu item",
  icon: "img/icon.png"
});

submenu.append(new nw.MenuItem({
    label: 'Item 1',
    click: function() {
        alert("Item 1 clicked.");
    },
    }
));
submenu.append(new nw.MenuItem({
    label: 'Item 2',
    click: function() {
        alert("Item 2 clicked.");
    },
    }
));
submenu.append(new nw.MenuItem({
    label: 'Item 3',
    click: function() {
        alert("Item 3 clicked.");
    },
    }
));
item.submenu = submenu;

menu.append(item);

// Hooks the "contextmenu" event
document.body.addEventListener('contextmenu', function(ev) {
  // Prevent showing default context menu
  ev.preventDefault();
  // Popup the native context menu at place you click
  menu.popup(ev.x, ev.y);

  return false;
}, false);

</script>  
</body>
</html>


var nw = require('nw.gui');


Node Webkit의 GUI 라이브러리인 nw.gui를 불러온다.


var menu = new nw.Menu();
var submenu = new nw.Menu();


menu와 submenu라는 이름으로 Menu() 인스턴스를 생성한다.


// Create a normal item with label and icon
var item = new nw.MenuItem({
  type: "normal", 
  label: "I'm a menu item",
  icon: "img/icon.png"
});


item이라는 이름으로 Menu() 인스턴스를 생성하되, 몇가지 속성을 정의한다.


submenu.append(new nw.MenuItem({
    label: 'Item 1',
    click: function() {
        alert("Item 1 clicked.");
    },
    }
));
submenu.append(new nw.MenuItem({
    label: 'Item 2',
    click: function() {
        alert("Item 2 clicked.");
    },
    }
));
submenu.append(new nw.MenuItem({
    label: 'Item 3',
    click: function() {
        alert("Item 3 clicked.");
    },
    }
));

item.submenu = submenu;


3개의 Submenu Instance를 생성하고, 이를 item의 submenu로 등록하였다.


menu.append(item);


item을 menu에 붙인다.


// Hooks the "contextmenu" event
document.body.addEventListener('contextmenu', function(ev) {
  // Prevent showing default context menu
  ev.preventDefault();
  // Popup the native context menu at place you click
  menu.popup(ev.x, ev.y);

  return false;
}, false);


Context Menu의 이벤트 리스너를 처리한다. 마우스 우측 버튼을 클릭한 위치에 menu가 뜨도록 하였다.


Result

Mac OS에서 실행한 결과는 다음과 같다:

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

[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 4 - Using Node.JS File System  (0) 2016.01.27
[WebApp / Node Webkit] Example 3 - Using Node.JS API  (0) 2016.01.24
[WebApp / Node Webkit] Example 2 - Context Menu  (0) 2016.01.23
공유하기 링크
'Programming/Web App' Related Articles more
Comments