Поделиться через

Краткое руководство: добавление меню (HTML)

  • Статья

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

В данном кратком руководстве описан порядок создания меню для представления команд пользователю. (Только для Windows)

Необходимые условия

Создание первого приложения Магазина Windows на JavaScript

Рекомендации и контрольный список для всплывающих элементов

Создание меню

В этом примере в момент нажатия пользователем кнопки "Ответ" над этой кнопкой появляется меню. Данное меню является элементом управления в библиотеке Windows для JavaScript 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);
}

Сводка

В данном кратком руководстве описан порядок создания меню для представления команд пользователю.