快速入門：新增應用程式說明 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

這個快速入門為您示範如何使用 HTML 與適用於 JavaScript 之 Windows Library (WinJS) 的 SettingsFlyout 物件，將 [說明] 飛出視窗新增到 [設定] 窗格。若要檢視完整應用程式中的 [說明] 飛出視窗，請參閱應用程式設定範例。

在下列範例中，您要在 HTML 檔案 (HelpUI.html) 中定義名為 [說明] 的 [設定] 飛出視窗。接著，您要使用 JavaScript 來初始化 [設定] 飛出視窗和填入 [設定] 窗格。

**使用 C#/Visual Basic/C++ 和 XAML？**請參閱Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML)。

先決條件

閱讀應用程式說明的指導方針與應用程式設定的指導方針。

指示

1. 定義 [說明] 飛出視窗。

建立名為 "HelpUI.html" 的 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>

注意此飛出視窗的寬度預設為"窄格式" (346px)。設定 data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" 來建立寬格式的飛出視窗 (646px)。

2. 處理 [設定] 飛出視窗和填入 [設定] 窗格。

下列程式碼會使用 JavaScript 來處理 [設定] 飛出視窗和填入 SettingsPane。啟用應用程式時呼叫此函式。

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();
}

注意這個函式應在 DOM 初始化之後呼叫。不過，如果您從 onactivated 函式呼叫 initializeSettings，就不用擔心 DOM 初始化；activated 事件會在 DOMContentLoaded 事件之後發生。如需詳細資訊，請參閱最佳化應用程式週期 (使用 JavaScript 和 HTML 的 Windows 市集應用程式)。

摘要與後續步驟

在這個快速入門中，您學到如何使用 HTML 與適用於 JavaScript 的 Windows Library 來新增說明到設定窗格。

接下來，您可以學習如何使用 iframe 在說明頁面中包含線上說明。

如何在說明中包含線上內容

共用方式為

快速入門：新增應用程式說明 (HTML)

先決條件

指示

1. 定義 [說明] 飛出視窗。

2. 處理 [設定] 飛出視窗和填入 [設定] 窗格。

摘要與後續步驟

相關主題

其他資源