Démarrage rapide : ajout d’un menuvolant (HTML)

  • Article

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Cette rubrique de démarrage rapide vous explique comment créer un menu volant et définir son style. (Windows uniquement)

Prérequis

Développement de votre première application du Windows Store Windows avec JavaScript

Recommandations et liste de vérification sur les menus volants

1. Créer un menu volant

Dans cet exemple, quand l’utilisateur appuie sur le bouton Acheter, un menu volant apparaît au-dessus du bouton. Un menu volant est un contrôle dans la bibliothèque Windows pour JavaScript, WinJS.UI.Flyout, et doit être l’enfant direct de l’élément <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. Définir le style du menu volant

Vous pouvez conserver les styles par défaut des thèmes Light et Dark UI, illustrés ici, ou personnaliser les styles, comme expliqué ci-dessous.

Menu volant dans le style clair

Menu volant dans le style foncé

 

Un certain nombre de propriétés CSS pour les menus volants peuvent être personnalisées.

Propriété Exemple

Font-family

Contrôle la police du texte

 font-family:'Segoe UI';

Font-size

Contrôle la taille du texte

 font-size:9pt;

Couleur

Contrôle la couleur du texte

 color:rgb(0, 0, 0);

Background-color

Contrôle la couleur d’arrière-plan du texte

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

Bordure

Contrôle l’épaisseur, la couleur et le style de ligne de la bordure

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

Max-width

Contrôle la largeur maximale de la zone

 max-width:400px;

 

Cet exemple provient de l’exemple de contrôle de menu volant HTML et dépend principalement des styles par défaut.

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

Cet exemple va un peu plus loin avec des éléments visuels plus apparents, mais le résultat est assez laid.

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

Un menu volant auquel un style est appliqué

Récapitulatif

Cette rubrique de démarrage rapide vous a montré comment créer un menu volant et en définir le style en réponse à une action de l’utilisateur.

Rubriques associées

WinJS.UI.Flyout

Exemple de contrôle de menu volant HTML