Démarrage rapide : ajout d’un menu volant
Réduire la table des matières
Développer la table des matières

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

[ 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

 

 

Afficher:
© 2016 Microsoft