메뉴
Menu 개요
Menu 컨트롤에는 사용자가 클릭 또는 터치 한 번으로 호출할 수 있는 명령 드롭다운 목록이 있는 텍스트 요소가 표시됩니다. ComboBox에서 컨트롤을 상속하므로 ItemsSource 속성을 사용하여 컨트롤을 채우고 스타일링 할 수 있습니다. ComboBox 컨트롤 외에도 Menu 컨트롤은 사용자가 메뉴에서 항목을 선택하면 ItemClicked 이벤트를 실행합니다. 이벤트 핸들러는클릭된 항목을 확인하고 적절한 작업을 수행하여 메뉴의 selectedItem 속성을 검사할 수 있습니다.
아래 예제에서는 Menu 컨트롤이 어떻게 만들어지고 itemClicked 이벤트가 처리되는 방법을 보여 줍니다.
<div style="margin:10px;" id="menuFile">File<div><span class="glyphicon glyphicon-asterisk"></span> <b>New</b><br><small><i>create a new file</i></small></div><div><span class="glyphicon glyphicon-folder-open"></span> <b>Open</b><br><small><i>open an existing file or folder</i></small></div><div><span class="glyphicon glyphicon-floppy-disk"></span> <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> <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 menuslet menuFile = createMenu('menuFile');menuFile.itemClicked.addHandler(menuClick);let menuEdit = createMenu('menuEdit');menuEdit.itemClicked.addHandler(menuClick);// use the same event handler for bothfunction menuClick(sender) {alert(`You selected option **${sender.selectedIndex}** from menu **${sender.header}**`);}// create menu from markupfunction createMenu(elementId) {// get host element, header, itemslet 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 menuhost.innerHTML = '';let menu = new input.Menu(host, {header: header,itemsSource: menuItems});// done, return menureturn menu;}}