Langage: HTML | XAML

Liste des contrôles (HTML)

Applies to Windows and Windows Phone

Les applications Windows Runtime en JavaScript ont accès à une vaste bibliothèque de contrôles qui aident au développement de l’interface utilisateur. Certains de ces contrôles ont une représentation visuelle, tandis que d’autres font office de conteneurs d’autres contrôles ou d’un autre contenu, à l’instar des images et d’un contenu multimédia.

Cette rubrique propose une liste alphabétique des principaux contrôles des applications Windows Runtime en JavaScript.

A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z

A

a

Désigne le début ou la destination d’un lien hypertexte.


<a href="url">Your text</a>

Référence : a

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

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

B

bouton Précédent (Windows uniquement)

Fournit la possibilité de naviguer vers l’arrière sous forme d’un bouton.


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

Référence : WinJS.UI.BackButton

bouton

Contrôle bouton

Représente un contrôle bouton.


<button>A button</button>

- ou -


<input type="button" value="A button" />

Référence : button, input type=button

Démarrage rapide : ajout d’un bouton

C

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

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).

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 du Windows Store.


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


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

D

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

liste déroulante

Voir l’entrée "select" (sélection).

E

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

F

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 flexible

Disposition 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

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

menu volant (Windows uniquement)

Affiche un message nécessitant une action de la part de l’utilisateur. (Contrairement à une boîte de dialogue, 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

G

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

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

H

contrôle HTML

Affiche le contenu d’une page HTML.


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

Référence : WinJS.UI.HtmlControl

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

lien hypertexte

Voir l’entrée "a".

I

iframe

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


<iframe src="url" />

Référence : iframe

img

Affiche une image.


<img src="url" />

Référence : img

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.ItemContainer

Exemple de contrôle ItemContainer HTML

J

affichage de raccourci

Voir l’entrée "semantic zoom" (zoom sémantique).

L

é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

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

M

é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).

menu

Affiche un menu. (Windows uniquement)


<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

zone de texte de plusieurs lignes

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

N

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

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

P

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

mouvement panoramique

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

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

pivot (Windows Phone uniquement)

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 (Windows Phone uniquement)

Crée un onglet dans un contrôle d’onglet.


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

Référence : WinJS.UI.PivotItem

menu contextuel

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

barre de progression

Styles de contrôle de progression

Affiche une barre indiquant qu’une opération est en cours. L’anneau indéterminé n’est pas pris en charge sur Windows Phone 8.1.


<progress />

Référence : progress

Démarrage rapide : ajout de contrôles de progression

anneau de progression (Windows uniquement)

Affiche un anneau indiquant qu’une opération est en cours.


<progress class="win-ring" style="width: 20px; height: 20px" />

Référence : progress

Démarrage rapide : ajout de contrôles de progression

bouton de commande

Voir l’entrée "button" (bouton).

R

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).

évaluation (Windows uniquement)

Contrôle d’évaluation

Permet à l’utilisateur d’évaluer un élément ou d’afficher son évaluation existante.


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

Référence : WinJS.UI.Rating

Démarrage rapide : ajout d’évaluations

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

bouton de réinitialisation

Un bouton de réinitialisation

Réinitialise des données dans un formulaire.


<button type="reset">Reset</button>

Référence : button, input type=reset

Démarrage rapide : ajout d’un bouton

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 définissez la propriété contentEditable des éléments à modifier.


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

Référence : contentEditable

S

barre de défilement

Conteneur qui permet le défilement de son contenu. Pour ajouter cette fonctionnalité de défilement, définissez la propriété overflow de style 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

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

sélection

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

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

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

zone de texte d’une ligne

Voir l’entrée "text box" (zone de texte).

curseur

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


<input type="range" />


Référence : input type=range

bouton d’envoi
Contrôle bouton Envoyer

Crée un bouton qui, lorsqu’il est enfoncé, envoie le formulaire.


<button type="submit">Submit</button>


Référence : button, input type=submit

Démarrage rapide : ajout d’un bouton

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

T

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

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

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

U

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

V

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

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

W

affichage Web

Voir l’entrée "iframe".

Z

défilement avec possibilité de mouvement de zoom

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

 

 

Afficher:
© 2014 Microsoft