Language: HTML | XAML

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

Applies to Windows only

這個快速入門為您示範如何使用 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)

如需了解此功能的運作情形,請參閱應用程式功能,從開始到完成系列:  Windows 市集應用程式 UI,從開始到完成

先決條件

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

指示

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 在說明頁面中包含線上說明。

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

相關主題

應用程式設定範例
快速入門:新增應用程式設定
WinJS.UI.SettingsFlyout
Windows.UI.ApplicationSettings.SettingsPane
應用程式說明的指導方針
應用程式設定的指導方針
Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML)
最佳化應用程式週期 (使用 JavaScript 和 HTML 的 Windows 市集應用程式)

 

 

顯示:
© 2014 Microsoft