Краткое руководство: добавление всплывающего элемента (HTML)

Статья
03/04/2016

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

В этом кратком руководстве описан порядок создания и стилизации всплывающего элемента. (Только для Windows)

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

Создание первого приложения Магазина Windows на JavaScript

1. Создание всплывающего элемента

В этом примере в момент нажатия пользователем кнопки Buy (Купить) над этой кнопкой появляется всплывающий элемент. Этот всплывающий элемент является элементом управления в библиотеке Windows для JavaScript, WinJS.UI.Flyout, а также должен быть непосредственным дочерним типом элемента <body>.

<body>
    <!-- Button that launches the confirmation Flyout. -->
    <button class="action" id="buyButton">Buy</button>

    <!-- Confirmation Flyout. -->
    <div id="confirmFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Confirm purchase flyout}">
        <div>Your account will be charged $252.</div>
        <button id="confirmButton">Complete Order</button>
    </div>
<body>

// Initialize WinJS controls.
WinJS.UI.processAll();

// Initialize event listeners.
document.getElementById("buyButton").addEventListener("click", showConfirmFlyout, false);
document.getElementById("confirmButton").addEventListener("click", confirmOrder, false);

// Command and Flyout functions.
function showConfirmFlyout() {
    showFlyout(confirmFlyout, buyButton, "top");
}
function showFlyout(flyout, anchor, placement) {
    flyout.winControl.show(anchor, placement);
}
function confirmOrder() {
    document.getElementById("confirmFlyout").winControl.hide();
}

2. Стиль всплывающего элемента

Вы можете использовать стандартные темы оформления пользовательского интерфейса (светлую или темную), представленные здесь, или создать собственную тему, как описано далее.

Всплывающий элемент в светлом стиле

Всплывающий элемент в темном стиле

У всплывающих элементов есть набор свойств CSS, которые можно настраивать.

Свойство	Пример
Font-family (Семейство шрифтов) Управляет шрифтом текста	`font-family:'Segoe UI';`
Font-size (Размер шрифта) Управляет шрифтом текста	`font-size:9pt;`
Цвет Управляет цветом текста	`color:rgb(0, 0, 0);`
Background-color (Цвет фона) Управляет цветом гарнитуры (шрифта)	`background-color:rgb(255, 255, 255);`
Рамка Управляет толщиной, цветом и стилем линий рамки	`border:2px solid rgb(128, 128, 128);`
Max-width (Максимальная ширина) Управляет максимальной шириной окна	`max-width:400px;`

Этот пример взят из примера HTML flyout control, и в нем в основном использован стандартный стиль.

    /* Flyout title. */
    .win-flyout:not(.win-menu) .win-type-x-large
    {
        font-weight: 300;
        margin-top: -13px;
        padding-bottom: 18px;
    }

    /* Flyout buttons. */
    .win-flyout:not(.win-menu) button,
    .win-flyout:not(.win-menu) input[type="button"]
    {
        margin-top: 16px;
        margin-left: 20px;
        float: right;
    }

Визуальные элементы в данном примере выражены более четко, однако сам образец все еще требует доработки.

    /* Flyout with attent-getting colors. */
    .win-flyout
    {
        background-color: yellow;
        border-color: red;
        color: green;
    }

Всплывающий элемент с примененным стилем

Сводка

В этом кратком руководстве мы создали всплывающий элемент, реагирующий на действие пользователя.

Связанные разделы

WinJS.UI.Flyout

Пример использования элемента управления "Всплывающий элемент", написанный на HTML