Contrôles par fonction (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 ]

Les applications Windows Runtime en JavaScript offrent des contrôles qui remplissent diverses fonctions. Vous pouvez choisir le contrôle adapté à votre scénario en comparant les contrôles qui offrent des fonctionnalités similaires. (Pour obtenir une liste alphabétique des contrôles, voir Liste des contrôles).

Voir ces fonctionnalités en action dans le cadre de notre série Fonctionnalités d’application de A à Z: Interface utilisateur des applications du Windows Store de A à Z

Barres et commandes des applications

  • barre de l’application
    Fournit une barre d’outils pour afficher des commandes spécifiques à l’application.

    <div data-win-control="WinJS.UI.AppBar"></div>

    Référence : WinJS.UI.AppBar

    Démarrage rapide : ajout d’une barre de l’application

  • menu contextuel
    Fournit un menu léger qui donne aux utilisateurs accès à des actions (telles que les commandes du Presse-papiers) sur du texte ou des objets de l’interface utilisateur dans les applications Windows Runtime en JavaScript.

    var menu = new Windows.UI.Popups.PopupMenu();

    Référence : Windows.UI.Popups.PopupMenu

  • menu (Windows uniquement)
    Affiche un menu.

    <div data-win-control="WinJS.UI.Menu"></div>

    Référence : Menu

  • commande de menu (Windows uniquement)
    Représente une commande à afficher dans un objet Menu.

    <button data-win-control="WinJS.UI.MenuCommand" />

    Référence : MenuCommand

  • barre de navigation (Windows uniquement)
    Affiche les commandes de navigation dans une barre d’outils que l’utilisateur peut afficher ou masquer.

    <div data-win-control="WinJS.UI.NavBar"></div>

    Référence : WinJS.UI.NavBar

    Exemple de contrôle NavBar HTML

  • commande de barre de navigation (Windows uniquement)
    Représente une commande de navigation dans un conteneur de barre de navigation.

    <div data-win-control="WinJS.UI.NavBarCommand"></div>

    Référence : WinJS.UI.NavBarCommand

    Exemple de contrôle NavBar HTML

  • conteneur de barre de navigation (Windows uniquement)
    Contient un groupe de commandes de barre de navigation dans une barre de navigation.

    <div data-win-control="WinJS.UI.NavBarContainer"></div>

    Référence : WinJS.UI.NavBarContainer

    Exemple de contrôle NavBar HTML

  • menu contextuel
    Voir l’entrée "context menu" (menu contextuel).

  • barre d’outils
    Affiche un ensemble de commandes. Un élément Toolbar peut apparaître à n’importe quel emplacement, y compris dans un élément Flyout ou AppBar.

    <div data-win-control="WinJS.UI.Toolbar">
</div>

    Référence : Toolbar

Boutons

Contrôles de collection/données

  • vue symétrique
    Affiche une collection, un élément à la fois.

    <div data-win-control="WinJS.UI.FlipView"></div>

    Référence : WinJS.UI.FlipView

    Démarrage rapide : ajout d’un contrôle FlipView

  • affichage Grille
    ListView avec une présentation grille. Voir l’entrée "list view" (affichage liste) pour plus d’informations.

    <div data-win-control="WinJS.UI.ListView" 
    data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>

    Référence : WinJS.UI.ListView

    Démarrage rapide : ajout d’un contrôle ListView

  • visionneuse de raccourci
    Voir zoom sémantique

  • repeater
    Génère du code HTML à partir d’un jeu de données. Utilisez ce contrôle pour générer des listes d’éléments.

    <div data-win-control="WinJS.UI.Repeater"></div>

    Référence : WinJS.UI.Repeater

    Exemple de contrôle Repeater HTML

  • zoom sémantique
    Permet à l’utilisateur de zoomer entre deux vues d’une collection d’éléments.

    <div data-win-control="WinJS.UI.SemanticZoom">

  <!-- Control that provides the zoomed-in view. -->
  <div id="zoomedInView" data-win-control="WinJS.UI.ListView"></div>

  <!-- Control that provides the zoomed-out view. -->
  <div id="zoomedOutView" data-win-control="WinJS.UI.ListView"></div>

</div>

    Référence : WinJS.UI.SemanticZoom

  • boîte de dialogue de contenu
    Affiche les informations critiques qui nécessitent l’attention, ou une action explicite de l’utilisateur, et qui bloquent pour un temps toute interaction avec d’autres éléments de l’application.

    <div 
  data-win-control="WinJS.UI.ContentDialog">
  <!-- Content -->
</div

    Référence : ContentDialog

  • menu contextuel
    Voir l’entrée "popup menu" (menu contextuel).

  • menu volant (Windows uniquement)
    Affiche un message nécessitant une action de la part de l’utilisateur. (Contrairement à une boîte de message, un menu volant ne crée pas de fenêtre distincte et ne bloque pas l’action des autres utilisateurs.)

    <div data-win-control="WinJS.UI.Flyout"></div>

    Référence : WinJS.UI.Flyout

    Démarrage rapide : ajout d’un menu volant

  • menu (Windows uniquement)
    Affiche un menu.

    <div data-win-control="WinJS.UI.Menu"></div>

    Référence : WinJS.UI.Menu

  • commande de menu (Windows uniquement)
    Représente une commande à afficher dans un objet Menu.

    <button data-win-control="WinJS.UI.MenuCommand" />

    Référence : WinJS.UI.MenuCommand

  • boîte de message
    Affiche un message qui nécessite une réponse utilisateur immédiate.

    Référence : Windows.UI.Popups.MessageDialog

    Démarrage rapide : ajout d’une boîte de dialogue de message

  • menu contextuel
    Représente un menu contextuel.

    var popupMenu = new Windows.UI.Popups.PopupMenu();

    Référence : Windows.UI.Popups.PopupMenu

  • menu volant Paramètres (Windows uniquement)
    Fournit l’accès aux paramètres de l’application.

    <div data-win-control="WinJS.UI.SettingsFlyout"></div>

    Référence : SettingsFlyout

  • info-bulle (Windows uniquement)
    Affiche une info-bulle enrichie qui prend en charge du contenu riche (tel que des images et du texte mis en forme) pour afficher davantage d’informations sur un élément.

    <div data-win-control="WinJS.UI.ToolTip"></div>

    Référence : WinJS.UI.Tooltip

  • info-bulle, simple
    Affiche une info-bulle simple ne contenant que du texte pour un élément.

    <element title="tooltip text" />

    Référence : title

Graphismes

  • zone de dessin
    Fournit un objet utilisé pour le dessin, le rendu et la manipulation d’images et de graphiques dans un document.

    <canvas />

    Référence : canvas

    Démarrage rapide : dessin sur une zone de dessin

  • svg
    Définit un document SVG ou un fragment de document qui peut afficher le rendu de graphiques vectoriels.

    <svg xmlns="http://www.w3.org/2000/svg"></svg>

    Référence : svg

Images

  • img
    Affiche une image.

    <img src="url" />

    Référence : img

Contrôles de disposition

  • zone flexible
    Disposition CSS qui prend en compte l’espace disponible lors de la définition des dimensions d’une zone, permettant ainsi des tailles et un positionnement relatif.

    <div style="display: -ms-box;">
    <!-- Child elements -->
</div>

    Référence : display

  • grille
    Disposition CSS qui définit une zone de grille flexible composée de colonnes et de lignes.

    <div style="{display: -ms-grid}">
    <!-- Child elements -->
</div>

    Référence : display

  • hub (Windows uniquement)
    Crée un modèle de navigation Hub constitué de sections auxquelles l’utilisateur peut accéder. Chaque section est définie par une section Hub.

    <div data-win-control="WinJS.UI.Hub"></div>

    Référence : WinJS.UI.Hub

    Exemple de contrôle Hub HTML

  • section hub (Windows uniquement)
    Définit une section d’un Hub.

    <div data-win-control="WinJS.UI.HubSection"></div>

    Référence : WinJS.UI.HubSection

    Exemple de contrôle Hub HTML

  • conteneur d’élément
    Définit un élément sur lequel l’utilisateur peut appuyer, et qu’il peut balayer et faire glisser.

    <div data-win-control="WinJS.UI.ItemContainer"></div>

    Référence : WinJS.UI.WinJS.UI.ItemContainer

    Exemple de contrôle ItemContainer HTML

  • mouvement panoramique
    Voir l’entrée "scroll view" (défilement).

  • pivot
    Crée un contrôle d’onglet qui affiche plusieurs éléments.

    <div data-win-control='WinJS.UI.Pivot'></div>

    Référence : WinJS.UI.Pivot

  • élément pivot
    Crée un onglet dans un contrôle d’onglet.

    <div data-win-control='WinJS.UI.PivotItem'></div>

    Référence : WinJS.UI.PivotItem

  • barre de défilement
    Conteneur qui vous permet de parcourir son contenu. Pour ajouter cette fonctionnalité de défilement, définissez le paramètre du style overflow d’un élément sur « scroll » ou « auto ».

    <div style="overflow:scroll;">
    <!-- Contents -->
</div>

    Référence : overflow

  • défilement
    Affiche une vue du contenu sur lequel un utilisateur peut effectuer des zooms avant et arrière, et fournit des fonctionnalités supplémentaires, telles que des points d’ancrage, qui améliorent cette expérience.

    <div style=overflow:scroll;-ms-content-zooming:zoom>>
    <!-- Contents to edit. -->
</div>

    Référence : overflow, ms-content-zooming

  • mode Fractionné
    Fractionne une zone en deux parties : un volet affichable depuis un bord et une zone de contenu, qui remplit l’espace disponible.

    <div data-win-control="WinJS.UI.SplitView">
</div>

    Référence : SplitView

  • viewbox
    Ajuste un seul élément enfant pour remplir l’espace disponible sans le redimensionner. Ce contrôle réagit aux modifications apportées à la taille du conteneur et à la taille de l’élément enfant. Par exemple, une demande de support peut aboutir à une modification des proportions.

    <div data-win-control="WinJS.UI.ViewBox"></div>

    Référence : WinJS.UI.ViewBox

  • défilement avec possibilité de mouvement de zoom
    Voir l’entrée "scroll view" (défilement).

Contrôles multimédias

  • audio
    Spécifie le contenu sonore ou audio, tel que de la musique ou des effets, à lire dans un document.

    <audio>
    <source src="uri" type="audioType" />
</audio>

    Référence : audio

  • élément multimédia
    Voir les entrées "audio" (audio) et "video" (vidéo).

  • lecteur multimédia
    Voir les entrées "audio" (audio) et "video" (vidéo).

  • vidéo
    Spécifie le contenu vidéo à lire dans un document.

    <video controls="controls">
   <source src="url" type="videoType" />
</video>

    Référence : video

  • contrôle HTML
    Affiche le contenu d’une page HTML.

    <div data-win-control="WinJS.UI.HtmlControl"></div>

    Référence : WinJS.UI.HtmlControl

  • iframe
    Cadre flottant inséré pouvant afficher un autre document.

    <iframe src="url" />

    Référence : iframe

  • contrôle de page
    Représente un contrôle personnalisé ou une page d’une application de navigation.

    Référence : WinJS.UI.Pages.PageControl

    Démarrage rapide : utilisation de la navigation sur une seule page

  • mode Fractionné
    Fractionne une zone en deux parties : un volet affichable depuis un bord et une zone de contenu, qui remplit l’espace disponible.

    <div data-win-control="WinJS.UI.SplitView">
</div>

    Référence : SplitView

  • affichage Web
    Voir l’entrée "iframe".

Contrôles de progression

Contrôles d’évaluation

Contrôles de sélection

  • case à cocher
    Plusieurs contrôles de case à cocher

    Représente une case à cocher que l’utilisateur peut activer ou désactiver.

    <input type="checkbox" />

    Référence : input type=checkbox

    Démarrage rapide : ajout de cases à cocher

  • zone de liste déroulante
    Voir l’entrée "select" (sélection).

  • sélecteur de date (Windows uniquement)
    Style clair du contrôle DatePicker

    Définit une date.

    <div data-win-control="WinJS.UI.DatePicker"></div>

    Référence : DatePicker

    Démarrage rapide : ajout d’un DatePicker

  • téléchargement de fichiers
    Crée un objet de téléchargement de fichier doté d’une zone de texte et d’un bouton Parcourir.

    <input type="file" />

    Référence : input type=file

  • zone de liste
    Voir l’entrée "select" (sélection).

  • affichage de liste
    Affiche une collection de données dans une disposition en liste ou en grille.

    <div data-win-control="WinJS.UI.ListView"></div>

    Référence : WinJS.UI.ListView

    Démarrage rapide : ajout d’un contrôle ListView

  • case d’option
    Type de contrôle de sélection qui limite la sélection d’un utilisateur à une seule valeur d’un ensemble de valeurs. Pour ce faire, vous devez relier chaque case d’un ensemble de cases d’option en attribuant à chaque case le même nom.

    <input type="radio" id="redRadio" name="colorRadio" /><label for="redRadio">Red</label>   
<input type="radio" id="greedRadio" name="colorRadio" /><label for="greedRadio">Green</label>
<input type="radio" id="blueRadio" name="colorRadio" /><label for="blueRadio">Blue</label>

    Référence : input type=radio

  • plage
    Voir l’entrée "slider" (curseur).

  • zone de recherche (Windows uniquement)
    Permet à l’utilisateur d’effectuer des requêtes de recherche et de sélectionner des suggestions.

    <div data-win-control="WinJS.UI.SearchBox"></div>

    Référence : WinJS.UI.SearchBox

    Exemple de contrôle SearchBox

  • select
    Représente une zone de liste, une zone de liste déroulante ou une liste déroulante.

    <select>
    <option>Apple</option>
    <option>Banana</option>
    <option>Grape</option>
    <option>Orange</option>
    <option>Pear</option>
    <option>Watermelon</option>
</select>

    Référence : select

  • curseur
    Fournit un curseur de plage permettant de sélectionner une valeur numérique.

    <input type="range" />

    Référence : input type=range

  • sélecteur d’heure (Windows uniquement)
    Style clair du contrôle TimePicker

    Permet à l’utilisateur de spécifier une heure.

    <div data-win-control="WinJS.UI.TimePicker"></div>

    Référence : WinJS.UI.TimePicker

    Démarrage rapide : ajout d’un TimePicker

  • bouton bascule
    Représente un commutateur qui peut basculer entre deux états.

    <div data-win-control="WinJS.UI.ToggleSwitch"></div>

    Référence : ToggleSwitch

Contrôles de texte

  • zone de saisie du courrier électronique
    Contrôle avec zone de saisie d’une seule ligne qui accepte une ou plusieurs adresses e-mail.

    <input type="email" />

    Référence : input type=email

  • zone de texte de plusieurs lignes
    Voir l’entrée "textarea" (zone de texte).

  • zone de saisie de nombre
    Contrôle avec zone de saisie d’une seule ligne qui accepte une valeur numérique.

    <input type="number" />

    Référence : input type=number

  • zone de saisie de mot de passe
    Contrôle de zone de texte d’une seule ligne semblable au contrôle d’entrée de texte, excepté que le texte ne s’affiche pas à mesure que l’utilisateur le tape.

    <input type="password" />

    Référence : input type=password

  • zone d’édition enrichie/zone de texte enrichi
    Contrôle fournissant une fonctionnalité de saisie de texte semblable à une zone de texte mais qui peut gérer un contenu contenant des éléments enfants. Pour créer une zone de texte enrichi, vous devez définir la propriété contentEditable des éléments à modifier.

    <div contentEditable="true">
    <!-- Elements to edit. -->
</div>

    Référence : contentEditable

  • zone de texte d’une ligne
    Voir l’entrée "text box" (zone de texte).

  • zone de texte
    Contrôle de zone de texte d’une seule ligne.

    <input type="text" />

    Référence : input type=text

  • espace de texte
    Contrôle de zone de texte de plusieurs lignes.

    <textarea></textarea>

    Référence : textarea

  • zone de saisie d’URL
    Contrôle avec zone de saisie d’une seule ligne qui accepte les URL.

    <input type="url" />

    Référence : input type=url

Aide à l’utilisateur

  • étiquette
    Spécifie une étiquette pour un autre élément de la page.

    <label for="otherControl">Label text</label>
<input type="text" id="otherControl" />

    Référence : label

  • info-bulle (Windows uniquement)
    Affiche une info-bulle enrichie qui prend en charge du contenu riche (tel que des images et du texte mis en forme) pour afficher davantage d’informations sur un élément.

    <div data-win-control="WinJS.UI.ToolTip"></div>

    Référence : WinJS.UI.Tooltip

  • info-bulle, simple
    Affiche une info-bulle simple ne contenant que du texte pour un élément.

    <element title="tooltip text" />

    Référence : title

Rubriques associées

Liste des contrôles

try.buildwinjs.com

Démarrage rapide : ajout de contrôles

Démarrage rapide : ajout de contrôles et de styles WinJS

Modifications apportées à l’API WinJS pour Windows Phone