메뉴

Menu 컨트롤에는 사용자가 클릭 또는 터치 한 번으로 호출할 수 있는 명령 드롭다운 목록이 있는 텍스트 요소가 표시됩니다. ComboBox에서 컨트롤을 상속하므로 ItemsSource 속성을 사용하여 컨트롤을 채우고 스타일링 할 수 있습니다. ComboBox 컨트롤 외에도 Menu 컨트롤은 사용자가 메뉴에서 항목을 선택하면 ItemClicked 이벤트를 실행합니다. 이벤트 핸들러는클릭된 항목을 확인하고 적절한 작업을 수행하여 메뉴의 selectedItem 속성을 검사할 수 있습니다.

아래 예제에서는 Menu 컨트롤이 어떻게 만들어지고 itemClicked 이벤트가 처리되는 방법을 보여 줍니다.

<div style="margin:10px;" id="menuFile">
File
<div>
<span class="glyphicon glyphicon-asterisk"></span>&nbsp;&nbsp;
<b>New</b>
<br>
<small><i>create a new file</i></small></div>
<div>
<span class="glyphicon glyphicon-folder-open"></span>&nbsp;&nbsp;
<b>Open</b>
<br>
<small><i>open an existing file or folder</i></small></div>
<div>
<span class="glyphicon glyphicon-floppy-disk"></span>&nbsp;&nbsp;
<b>Save</b>
<br>
<small><i>save the current file</i></small></div>
<div class="wj-separator"></div>
<div>
<span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;
<b>Exit</b>
<br>
<small><i>exit the application</i></small>
</div>
</div>
import * as input from '@grapecity/wijmo.input';
function init() {
// create file and edit menus
let menuFile = createMenu('menuFile');
menuFile.itemClicked.addHandler(menuClick);
let menuEdit = createMenu('menuEdit');
menuEdit.itemClicked.addHandler(menuClick);
// use the same event handler for both
function menuClick(sender) {
alert(`You selected option **${sender.selectedIndex}** from menu **${sender.header}**`);
}
// create menu from markup
function createMenu(elementId) {
// get host element, header, items
let host = document.getElementById(elementId), header = host.firstChild.textContent.trim(), items = host.querySelectorAll('div'), menuItems = [];
for (let i = 0; i < items.length; i++) {
let item = items[i];
menuItems.push(item.outerHTML);
}
// clear host and instantiate menu
host.innerHTML = '';
let menu = new input.Menu(host, {
header: header,
itemsSource: menuItems
});
// done, return menu
return menu;
}
}