Schnellstart: Hinzufügen eines Headermenü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 erfahren Sie, wie Sie einer Windows Store-App mit JavaScript ein Headermenü hinzufügen.
Voraussetzungen
- Erstellen Ihrer ersten Windows Store-App mit JavaScript
- Steuerungsdesign für Windows Store-Apps
- Navigationsdesign für Windows Store-Apps
- Schnellstart: Hinzufügen von Menüs
Definieren des Headers und des Menüs
So erstellen Sie ein Headermenü
- Konvertieren Sie den Titel Ihrer App in eine Schaltfläche, die ein Menu-Steuerelement startet.
- Fügen Sie dem Titel ein Chevron hinzu, um anzugeben, dass er ein Menü startet.
- Füllen Sie die Menüsteuerelemente mit Elementen auf, durch die Ihre App zu den korrekten Abschnitten navigiert.
Wenn Sie nach dieser Schnellstartanleitung vorgegangen sind, sieht das erstellte Headermenü in etwa wie folgt aus:
.png "Headermenü für eine Musik-App") |
| Headermenü für eine Musik-App |
Der folgende Code definiert ein Banner mit einem Chevron am Ende sowie das Menü. Sie finden diesen Code in der Datei "header-menu.html" im Headermenübeispiel.
<!-- Define the banner with a chevron at the end -->
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back">
</button>
<div class="titlearea win-type-ellipsis">
<button class="titlecontainer">
<h1>
<span class="pagetitle">Music</span>
<span class="chevron win-type-x-large"></span></h1>
</button>
</header>
<!-- Define the header menu -->
<div id="headerMenu" data-win-control="WinJS.UI.Menu">
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'collectionMenuItem',label:'Collection'}">
</button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'marketplaceMenuItem',label:'Marketplace'}">
</button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'newsMenuItem',label:'News'}">
</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:'homeMenuItem',label:'Home'}">
</button>
</div>
Anfügen von Klickereignissen an die Elemente des Headermenüs
Der folgende Code fügt dem Menüinhalt Klickereignishandler an. Der folgende Code befindet sich in der Datei "header-menu.js" im Headermenübeispiel.
var page = WinJS.UI.Pages.define("/html/header-menu.html", {
ready: function (element, options) {
document.querySelector(".titlearea").addEventListener("click", showHeaderMenu, false);
document.getElementById("artistsMenuItem").addEventListener("click", function() { goToSection("Collection"); }, false);
document.getElementById("albumsMenuItem").addEventListener("click", function () { goToSection("Marketplace"); }, false);
document.getElementById("songsMenuItem").addEventListener("click", function () { goToSection("News"); }, false);
document.getElementById("homeMenuItem").addEventListener("click", function () { goHome(); }, false);
}
});
// Place the flyout under the title and left-aligned
function showHeaderMenu() {
var title = document.querySelector("header .titlearea");
var menu = document.getElementById("headerMenu").winControl;
menu.anchor = title;
menu.placement = "bottom";
menu.alignment = "left";
menu.show();
}
Optional: Aktualisieren der Headeruntertitel bei der Navigation durch Benutzer
Zur Erleichterung der Orientierung können Sie die Untertitel aktualisieren, wenn die Benutzer durch die App navigieren.
// When navigating using the header menu for sections,
// change the subtitle to reflect the current pivot
function goToSection(section) {
WinJS.log && WinJS.log("You are viewing the " + section + " section.",
"sample", "status");
}
// Hide the subtitle if no pivot is being used
function goHome() {
WinJS.log && WinJS.log("You are home.", "sample", "status");
}
Anwenden von Stilen
Sie können diese Stile in der Datei "header-menu.css" anzeigen.
/* styles */
/* Styles for the header */
header[role=banner]
{
/* Define a grid with columns for the back button and page title. */
-ms-grid-columns: 120px 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
}
header[role=banner] .win-backbutton
{
-ms-grid-column:1;
margin-left: 39px;
margin-top: 59px;
}
header[role=banner] .titlearea {
-ms-grid-column:2;
padding-top:43px;
}
header[role=banner] .titlecontainer
{
display:inline;
background-color:transparent;
border:none;
}
header[role=banner] .subtitlecontainer
{
display:inline;
margin-left:26px;
}
header[role=banner] .titlearea .pagetitle
{
width: calc(100% - 20px);
}
header[role=banner] .titlearea .chevron {
vertical-align:8px;
}
header[role=banner] .titlecontainer:hover
{
color: rgb(50,154,163);
}
header[role=banner] .titlecontainer:active
{
color: rgb(37,187,196);
}
#headerMenu {
width:300px;
}
Zusammenfassung
In dieser Schnellstartanleitung haben Sie Ihrer App eine Headermenü hinzugefügt.