Schnellstart: Hinzufügen von Menüs (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]
In dieser Schnellstartanleitung wird das Erstellen eines Menüs für die Darstellung von Befehlen für die Benutzer beschrieben. (Nur Windows)
Voraussetzungen
Erstellen Ihrer ersten Windows Store-App mit JavaScript
Richtlinien und Prüfliste für Flyouts
Erstellen eines Menüs
Wenn ein Benutzer in diesem Beispiel auf die "Respond"-Schaltfläche klickt, wird über der Schaltfläche ein Menü angezeigt. Ein Menü ist ein Steuerelement aus der Windows-Bibliothek für JavaScript, WinJS.UI.Menu, und sollte direkt dem <body>
-Element untergeordnet sein.
<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);
}
Zusammenfassung
In dieser Schnellstartanleitung haben Sie ein Menü für die Darstellung von Befehlen für die Benutzer erstellt.