빠른 시작: 메뉴 추가(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
이 빠른 시작에서는 사용자에게 명령을 제공할 메뉴를 만드는 방법을 설명합니다. (Windows만 해당)
사전 요구 사항
JavaScript로 작성된 첫 번째 Windows 스토어 앱 빌드
메뉴 만들기
이 예제에서는 사용자가 Respond 단추를 누를 때 메뉴가 단추 위에 나타납니다. 메뉴는 JavaScript용 Windows 라이브러리의 컨트롤, WinJS.UI.Menu이며 <body>
요소의 직속 자식이어야 합니다.
<body>
<!-- Button that launches the respond menu. -->
<button id="respondButton" aria-haspopup="true">Respond</button>
<!-- Respond menu. -->
<div id="respondFlyout" data-win-control="WinJS.UI.Menu">
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'alwaysSaveMenuItem',label:'Always save drafts',type:'toggle', selected:'true'}"></button>
<hr data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'separator',type:'separator'}" />
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'replyMenuItem',label:'Reply'}"></button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'replyAllMenuItem',label:'Reply All'}"></button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'forwardMenuItem',label:'Forward'}"></button>
</div>
</body>
// Initialize WinJS controls.
WinJS.UI.processAll();
// Initialize event listeners.
document.getElementById("respondButton").addEventListener("click", showRespondFlyout, false);
document.getElementById("alwaysSaveMenuItem").addEventListener("click", alwaysSave, false);
document.getElementById("replyMenuItem").addEventListener("click", reply, false);
document.getElementById("replyAllMenuItem").addEventListener("click", replyAll, false);
document.getElementById("forwardMenuItem").addEventListener("click", forward, false);
// Command and menu functions.
function showFlyout(flyout, anchor, placement) {
flyout.winControl.show(anchor, placement);
}
function showRespondFlyout() {
showFlyout(respondFlyout, respondButton, "bottom");
}
function hideFlyout(flyout) {
flyout.winControl.hide();
}
function alwaysSave() {
var alwaysSaveState = document.getElementById("alwaysSaveMenuItem").winControl.selected;
}
function reply() {
hideFlyout(respondFlyout);
}
function replyAll() {
hideFlyout(respondFlyout);
}
function forward() {
hideFlyout(respondFlyout);
}
요약
이 빠른 시작에서는 사용자에게 명령을 제공할 메뉴를 만드는 방법을 설명했습니다.