Guida introduttiva: Aggiunta di un menu (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Questa guida introduttiva spiega come creare un menu per presentare i comandi all'utente. (Solo Windows)
Prerequisiti
Creazione della prima app di Windows Store in JavaScript
Linee guida ed elenco di controllo per i riquadri a comparsa
Creare un menu
In questo esempio, quando l'utente preme il pulsante Respond, sopra al pulsante viene visualizzato un menu. Un menu è un controllo WinJS.UI.Menu nella Libreria Windows per JavaScript e deve essere il figlio diretto dell'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);
}
Riepilogo
In questa guida introduttiva hai creato un menu per presentare i comandi all'utente.