Краткое руководство: добавление справки в приложение (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

В этом кратком руководстве описано добавление всплывающего элемента "Справка" на панель "Параметры" с помощью HTML и объекта SettingsFlyout библиотеки Windows для JavaScript (WinJS). Всплывающий элемент "Справка" в законченном приложении см. в примере App settings.

В следующем примере будет определен всплывающий элемент "Параметры" под названием "Справка" в HTML-файле (HelpUI.html). Затем будет инициализирован всплывающий элемент "Параметры" и заполнена панель "Параметры" с помощью JavaScript.

Используете C#, Visual Basic, C++ и XAML? См. раздел Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML).

Необходимые условия

Прочитайте разделы Рекомендации по справке для приложений и Рекомендации по параметрам приложений.

Инструкции

1. Дайте определение всплывающему элементу Help.

Создайте HTML-файл с именем "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>

Примечание По умолчанию этот всплывающий элемент будет "узким" (шириной 346 пикселей). Задайте параметр data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" для создания широкого всплывающего элемента (646 пикселей).

2. Обработайте всплывающие элементы "Параметры" и заполните панель "Параметры".

Следующий код обрабатывает всплывающий элемент "Параметры" и заполняет панель SettingsPane с помощью JavaScript. Вызовите эту функцию во время активации приложения.

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. Но не стоит волноваться об инициализации модели DOM, если вы вызываете initializeSettings из функции onactivated, — событие activated произойдет после события DOMContentLoaded. Подробнее: Оптимизация жизненного цикла приложения (приложения Магазина Windows на JavaScript и HTML).