共用方式為

快速入門：新增飛出視窗 (HTML)

  • 發行項

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

這個快速入門說明如何建立飛出視窗並設定其樣式。(僅限 Windows)

先決條件

使用 JavaScript 建立您的第一個 Windows 市集應用程式

飛出視窗的指導方針和檢查清單

1. 建立飛出視窗

在這個範例中，當使用者按下 [購買] 按鈕時，按鈕上方會出現飛出視窗。飛出視窗就是適用於 JavaScript 的 Windows Library 中的控制項 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. 設定飛出視窗的樣式。

您可以維持「淺色」與「深色」UI 佈景主題的標準樣式 (如下所示)，或是自訂樣式 (稍後說明)。

淺色樣式的飛出視窗

深色樣式的飛出視窗

 

您可以自訂飛出視窗的許多 CSS 屬性。

屬性 範例

Font-family

控制文字的字型

 font-family:'Segoe UI';

Font-size

控制文字的大小

 font-size:9pt;

Color

控制文字的色彩

 color:rgb(0, 0, 0);

Background-color

控制字體的背景色彩

 background-color:rgb(255, 255, 255);

Border

控制邊框的粗細、色彩及線條樣式

 border:2px solid rgb(128, 128, 128);

Max-width

控制方塊的寬度上限

 max-width:400px;

 

這個範例來自 HTML 飛出視窗控制項範例，而且主要取決於預設樣式。

    /* 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 飛出視窗控制項範例