Share via

快速入门：添加菜单 (HTML)

  • 项目

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

本快速入门介绍如何创建用来向用户显示命令的菜单。（仅限 Windows）

先决条件

使用 JavaScript 构建你的第一个 Windows 应用商店应用

弹出窗口的指南和清单

创建菜单

在以下示例中，当用户按下“Respond”按钮时，会在该按钮的上方出现一个菜单。菜单是适用于 JavaScript、WinJS.UI.Menu 且必须为 <body> 元素直接子项的 Windows 库中的一个控件。


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

摘要

在本快速入门中，你创建了一个用来向用户显示命令的菜单。