快速入門:新增應用程式說明 (HTML)
[ 本文的目標對象是撰寫 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 在說明頁面中包含線上說明。
相關主題
Windows.UI.ApplicationSettings.SettingsPane
Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML)