[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

메뉴 개요

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


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


menu-overview

Menu 컨트롤은 다음과 같은 키보드 명령을 지원합니다:

키 조합

동작

Alt + Up

메뉴 목록 열기/닫기

Alt + Down

메뉴 목록 열기/닫기

F4

메뉴 목록 열기/닫기

ESC

메뉴 목록 닫기

Enter (메뉴)

메뉴 목록 열기/닫기 (isButton: false)

명령 실행 (isButton: true)

Enter (메뉴 아이템)

명령 실행

Up

이전 메뉴 아이템 선택

Down

다음 메뉴 아이템 선택

HOME

첫 번째 메뉴 아이템 선택

END

마지막 메뉴 아이템 선택

Left (하위 메뉴)

하위 메뉴 닫기

Right (하위 메뉴)

하위 메뉴 열기

아래 예제에서는 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 '@mescius/wijmo.input';

function init() {
    // 파일 및 편집 메뉴 생성
    let menuFile = createMenu('menuFile');
    menuFile.itemClicked.addHandler(menuClick);
    
    let menuEdit = createMenu('menuEdit');
    menuEdit.itemClicked.addHandler(menuClick);
    
    // 두 메뉴에 동일한 이벤트 핸들러 사용
    function menuClick(sender) {
        alert(`You selected option **${sender.selectedIndex}** from menu **${sender.header}**`);
    }
    
    // 마크업에서 메뉴 생성
    function createMenu(elementId) {
        // 호스트 요소, 헤더, 아이템 가져오기
        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);
        }
        
        // 호스트 초기화 후 메뉴 인스턴스 생성
        host.innerHTML = '';
        let menu = new input.Menu(host, {
            header: header,
            itemsSource: menuItems
        });
        
        // 완료 후 메뉴 반환
        return menu;
    }
}

기본적으로 명령을 실행하기 위해 클릭하거나 Enter 키를 누르면 메뉴가 닫힙니다. 명령이 실행된 후에도 메뉴를 열린 상태로 유지하려면 keepOpen 속성을 true로 설정할 수 있습니다.

import * as input from '@mescius/wijmo.input';
let menu = new input.Menu('#theMenu', {
    keepOpen: true
});