Guida introduttiva: Aggiunta di un riquadro a comparsa (HTML)

Articolo
03/04/2016

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Questa guida introduttiva spiega come creare e applicare lo stile a un riquadro a comparsa. (Solo Windows)

Prerequisiti

Creazione della prima app di Windows Store in JavaScript

Linee guida ed elenco di controllo per i riquadri a comparsa

1. Creazione di un riquadro a comparsa

In questo esempio, quando l'utente preme il pulsante Buy, sopra al pulsante viene visualizzato un riquadro a comparsa. Un riquadro a comparsa è un controllo WinJS.UI.Flyout nella Libreria Windows per JavaScript e deve essere il figlio diretto dell'elemento <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. Applicazione dello stile al riquadro a comparsa.

Puoi mantenere lo stile standard dei temi chiari e scuri dell'interfaccia utente illustrati qui oppure personalizzarlo come descritto più avanti.

Un riquadro a comparsa nel tema chiaro

Un riquadro a comparsa nel tema scuro

Puoi personalizzare numerose proprietà CSS dei riquadri a comparsa.

Proprietà	Esempio
Font-family Controlla il tipo di carattere del testo	`font-family:'Segoe UI';`
Font-size Controlla la dimensione del testo	`font-size:9pt;`
Colore Controlla il colore del testo	`color:rgb(0, 0, 0);`
Background-color Controlla il colore di sfondo del carattere	`background-color:rgb(255, 255, 255);`
Border Controlla lo spessore, il colore e lo stile di linea del bordo	`border:2px solid rgb(128, 128, 128);`
Max-width Controlla la larghezza massima del riquadro	`max-width:400px;`

Questo esempio è tratto da quello del controllo riquadro a comparsa HTML e dipende principalmente dallo stile predefinito.

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

Pur andando avanti con gli elementi visivi più ovvi, il risultato ottenuto non è particolarmente gradevole.

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

Un riquadro a comparsa con stili

Riepilogo

In questa guida introduttiva hai creato e applicato lo stile a un riquadro a comparsa in risposta a un'azione dell'utente.

Argomenti correlati

WinJS.UI.Flyout

Esempio di riquadro a comparsa HTML

Condividi tramite