Share via

Guia de início rápido: adicionando um menu (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Este início rápido explica como criar um menu para apresentar comandos para o usuário. (Somente Windows)

Pré-requisitos

Compilando o seu primeiro aplicativo da Windows Store em JavaScript

Diretrizes e lista de verificação de submenus

Criar um menu

Neste exemplo, quando o usuário pressiona o botão Responder, um menu aparece acima do botão. Um menu é um controle na Biblioteca do Windows para JavaScript, WinJS.UI.Menu, e deve ser o filho direto do elemento <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);
}

Resumo

Neste início rápido, você criou um menu para apresentar comandos para o usuário.