메뉴

Menu 개요

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