Schnellstart: Hinzufügen von Flyouts (HTML)

  • Artikel

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

In dieser Schnellstartanleitung erfahren Sie, wie Sie ein Flyout erstellen und formatieren. (Nur Windows)

Voraussetzungen

Erstellen Ihrer ersten Windows Store-App mit JavaScript

Richtlinien und Prüfliste für Flyouts

1. Erstellen eines Flyouts

Wenn ein Benutzer in diesem Beispiel auf die Schaltfläche "Kaufen" klickt, wird über der Schaltfläche ein Flyout angezeigt. Ein Flyout ist ein Steuerelement aus der Windows-Bibliothek für JavaScript, WinJS.UI.Flyout, und sollte direkt dem <body>-Element untergeordnet sein.

<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. Formatieren des Flyouts

Sie können das hier gezeigte Standardformat des hellen oder dunklen Designs für die Benutzeroberfläche beibehalten oder das Format anpassen. Dies wird als Nächstes gezeigt.

Ein Flyout in hellem Stil

Ein Flyout in dunklem Stil

 

Es gibt eine Reihe von CSS-Eigenschaften für Flyouts, die Sie anpassen können.

Eigenschaft Beispiel

"Font-family"

Steuert die Schriftart des Texts.

 font-family:'Segoe UI';

"Font-size"

Steuert die Größe des Texts.

 font-size:9pt;

"Color"

Steuert die Farbe des Texts.

 color:rgb(0, 0, 0);

"Background-color"

Steuert die Hintergrundfarbe der Schriftart.

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

Rahmen

Steuert die Stärke, die Farbe und den Linienstil des Rahmens.

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

"Max-width"

Steuert die maximale Breite des Felds.

 max-width:400px;

 

Dieses Beispiel stammt aus dem HTML-Beispiel für ein Flyoutsteuerelement und hängt in erster Linie vom Standardformat ab.

    /* 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;
    }

Dieses Beispiel verwendet noch mehr der auffälligeren visuellen Elemente, sieht aber nicht schön aus.

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

Ein gestaltetes Flyout

Zusammenfassung

Sie haben in dieser Schnellstartanleitung ein Flyout als Reaktion auf eine Benutzeraktion erstellt und formatiert.

Verwandte Themen

WinJS.UI.Flyout

HTML-Beispiel für ein Flyoutsteuerelement