Schnellstart: Hinzufügen einer App-Hilfe (HTML)

Artikel
12/12/2015

[ 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 erläutert, wie Sie dem Einstellungsbereich mit HTML und dem SettingsFlyout-Objekt für die Windows-Bibliothek für JavaScript (WinJS) ein Hilfe-Flyout hinzufügen. Ein Hilfe-Flyout in einer kompletten App können Sie sich im Beispiel für App-Einstellungen ansehen.

Im folgenden Beispiel definieren Sie ein Einstellungen-Flyout mit dem Namen "Help" in einer HTML-Datei (HelpUI.html). Anschließend verwenden Sie JavaScript, um das Einstellungen-Flyout zu initialisieren und den Einstellungsbereich aufzufüllen.

Sie verwenden C#/Visual Basic/C++ und XAML? Informationen finden Sie unter: Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML).

Voraussetzungen

Lesen Sie die Richtlinien für die App-Hilfe und die Richtlinien für App-Einstellungen.

Anweisungen

Erstellen Sie eine HTML-Datei mit dem Namen "HelpUI.html".

<!DOCTYPE html>
<html>
<head>
    <title>Help Settings flyout</title>
</head>
<body>
    <!-- BEGINTEMPLATE: Template code for an empty Help flyout. -->
    <!-- Each Settings flyout should be defined in its own HTML file. -->
    <!-- Set data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" to create 
         a wide flyout. -->
    <!-- Set the background color for the header to the background color defined
         for your app tile in the manifest. -->
    <div data-win-control="WinJS.UI.SettingsFlyout"
         data-win-options="{settingsCommandId:'helpDiv', width:'wide'}">
        <div class="win-ui-dark win-header" title="Help">
            <button type="button" 
                    onclick="WinJS.UI.SettingsFlyout.show()"
                    class="win-backbutton"></button>
            <div class="win-label">Help</div>
        </div>
        <div class="win-content">
            <!-- Help content here -->
        </div>
    </div>
    <!-- ENDTEMPLATE -->
</body>
</html>

Hinweis Dieses Flyout ist standardmäßig "schmal" (346 Pixel). Legen Sie zum Erstellen eines breiten Flyouts (646 Pixel) data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" fest.

Der folgende Code verwendet JavaScript zum Verarbeiten des Einstellungen-Flyouts und Auffüllen des SettingsPane. Rufen Sie diese Funktion beim Aktivieren Ihrer App auf.

function initializeSettings() {
    // Initialize Settings flyout(s) and WinJS controls.
    WinJS.UI.processAll();
    
    // Populate Settings pane and tie commands to Settings flyouts.
    WinJS.Application.onsettings = function (e) {
        e.detail.applicationcommands = {
            "helpDiv": { href: "HelpUI.html", title: "Help"}
        };
        WinJS.UI.SettingsFlyout.populateSettings(e);
    }
    WinJS.Application.start();
}

Hinweis Die Funktion muss nach dem Initialisieren des DOMs aufgerufen werden. Sie müssen sich jedoch keine Gedanken um die DOM-Initialisierung machen, wenn Sie initializeSettings über die onactivated-Funktion aufrufen. Das activated-Ereignis tritt nach dem DOMContentLoaded-Ereignis auf. Weitere Informationen finden Sie unter Optimieren des App-Lebenszyklus (Windows Store-Apps mit JavaScript und HTML).

Zusammenfassung und nächste Schritte

In dieser Schnellstartanleitung haben Sie erfahren, wie Sie dem Bereich "Einstellungen" mithilfe von HTML und der Windows-Bibliothek für JavaScript App-Hilfe hinzufügen.

Als nächstes lernen Sie, wie Sie mithilfe von iframe-Elementen eine Onlinehilfe in Ihre Hilfeseite einbinden.

So wird's gemacht: Einschließen von Onlineinhalt in die Hilfe

Freigeben über

Schnellstart: Hinzufügen einer App-Hilfe (HTML)

Voraussetzungen

Anweisungen

1. Definieren Sie den Flyout "Help".

2. Verarbeiten Sie den Einstellungen-Flyout, und füllen Sie den Bereich "Einstellungen".

Zusammenfassung und nächste Schritte

Verwandte Themen

Zusätzliche Ressourcen