메뉴(Menu) 개요

Menu 컨트롤은 사용자가 클릭하거나 터치하여 호출할 수 있는 명령 드롭다운 목록과 함께 텍스트 요소를 표시합니다. 컨트롤이 __ComboBox__에서 상속되었기 때문에, ComboBox 컨트롤에서와 마찬가지로 ItemsSource 속성을 사용하여 컨트롤을 채우고 스타일 지정을 할 수 있습니다.

ComboBox 컨트롤 외에도, Menu 컨트롤은 사용자가 메뉴에서 항목을 선택할 때 ItemClicked 이벤트를 발생시킵니다. 이벤트 핸들러는 메뉴의 selectedItem 속성을 검사하여 어떤 항목이 클릭되었는지 확인하고 적절한 작업을 수행할 수 있습니다.

아래 예제에서는 Menu 컨트롤을 만들고 itemClicked 이벤트를 다루는 방법을 보여 줍니다.

HTML

 <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>

Javascript

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;
    }
}