Langage: HTML | XAML

Contrôles par fonction (HTML)

Applies to Windows and Windows Phone

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

Boutons

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"></div>

Référence : WinJS.UI.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

bouton de commande

Voir Bouton

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

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

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

Menus volants

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 (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

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

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

Navigation

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

affichage Web

Voir l’entrée "iframe".

Contrôles de progression

barre de progression

Styles de contrôle de progression

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


<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

Contrôles d’évaluation

é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

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

 

 

Afficher:
© 2014 Microsoft