Ajout d’une barre d’outils avec des commandes (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 ]
ToolBar est un contrôle simple qui traite l’extensibilité de la commande. Il dispose d’une action area dans laquelle les commandes sont immédiatement disponibles et d’une overflow area dans laquelle les commandes sont masquées, mais peuvent être affichées à la demande de l’utilisateur final. Le contrôle prend en charge le comportement adaptatif en autorisant les commandes à se déplacer dynamiquement depuis la zone principale vers la zone secondaire lorsque l’espace est limité. ToolBar n’est pas limitée à un emplacement unique dans une application, mais peut se trouver à différents emplacements tels que Splitview, Flyout et canvas.
Remarque Les scénarios de codage suivants sont consultables plus en détail sur le site web Essayer WinJS.
Créer une barre d’outils avec les commandes ajoutées de façon déclarative
Les commandes peuvent être ajoutées à la barre d’outils de façon déclarative. Dans ce scénario, la barre d’outils comporte quatre commandes principales et deux commandes secondaires.
.png "Dn972389.sample_toolbar(fr-fr,WIN.10).png")
<div class="basicToolbar" data-win-control="WinJS.UI.ToolBar">
<!-- Primary commands -->
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdEdit',
label:'edit',
section:'primary',
type:'button',
icon: 'edit',
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdDelete',
label:'delete',
section:'primary',
type:'button',
icon: 'delete',
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdFavorite',
label:'favorite',
section:'primary',
type:'toggle',
icon: 'favorite',
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdOpenWith',
label:'open with',
section:'primary',
type:'button',
icon: 'openfile',
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdDownload',
label:'download',
section:'primary',
type:'button',
icon: 'download',
onclick: Sample.outputCommand}"></button>
<!-- Secondary command -->
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdSettings',
label:'settings',
section:'secondary',
type:'button',
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdShare',
label:'share',
section:'secondary',
type:'button',
onclick: Sample.outputCommand}"></button>
</div>
<div class="status"></div>
WinJS.Namespace.define("Sample", {
outputCommand: WinJS.UI.eventHandler(function (ev) {
var status = document.querySelector(".status");
var command = ev.currentTarget;
if (command.winControl) {
var label = command.winControl.label || command.winControl.icon || "button";
var section = command.winControl.section || "";
var msg = section + " command " + label + " was pressed";
status.textContent = msg;
}
})
});
WinJS.UI.processAll();
Spécifier le regroupement et l’ordre de déplacement des commandes
Les développeurs peuvent spécifier le regroupement et l’ordre de déplacement des commandes vers la zone de débordement qui ne suit pas l’ordre visuel de droite à gauche. Ceci peut s’avérer utile lorsque l’espace à l’écran est limité. Le contrôle est déplacé de la valeur la plus élevée à la valeur la plus basse. Par défaut, les commandes sont déplacées de droite à gauche. Toutefois, la valeur par défaut de la priorité n’est pas définie.
.png "Dn972389.grouping_order_toolbar(fr-fr,WIN.10).png")
<div class="groupingToolbar" data-win-control="WinJS.UI.ToolBar">
<!-- Primary commands -->
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdEdit',
label:'edit',
section:'primary',
type:'button',
icon: 'edit',
priority:2,
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdDelete',
label:'delete',
section:'primary',
type:'button',
icon: 'delete',
priority:2,
onclick: Sample.outputCommand}"></button>
<hr data-win-control="WinJS.UI.Command" data-win-options="{type:'separator'}" />
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdFavorite',
label:'favorite',
section:'primary',
type:'toggle',
icon: 'favorite',
priority:3,
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdOpenWith',
label:'open with',
section:'primary',
type:'button',
icon: 'openfile',
priority:3,
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdDownload',
label:'download',
section:'primary',
type:'button',
icon: 'download',
priority:3,
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdPin',
label:'pin',
section:'primary',
type:'button',
icon: 'pin',
priority:3,
onclick: Sample.outputCommand}"></button>
<hr data-win-control="WinJS.UI.Command" data-win-options="{type:'separator'}" />
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdZoom',
label:'zoom',
section:'primary',
type:'button',
icon: 'zoomin',
priority:1,
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdFullscreen',
label:'full screen',
section:'primary',
type:'button',
icon: 'fullscreen',
priority:1,
onclick: Sample.outputCommand}"></button>
<!-- Secondary command -->
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdSettings',
label:'settings',
section:'secondary',
type:'button',
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdShare',
label:'share',
section:'secondary',
type:'button',
onclick: Sample.outputCommand}"></button>
</div>
<div class="status"></div>
WinJS.Namespace.define("Sample", {
outputCommand: WinJS.UI.eventHandler(function (ev) {
var status = document.querySelector(".status");
var command = ev.currentTarget;
if (command.winControl) {
var label = command.winControl.label || command.winControl.icon || "button";
var section = command.winControl.section || "";
var priority = command.winControl.priority;
var msg = section + " command " + label + " with priority " + priority + " was pressed";
status.textContent = msg;
}
})
});
WinJS.UI.processAll();
Afficher plusieurs barres d’outils à la fois
Les développeurs peuvent créer plusieurs barres d’outils et toutes les afficher en même temps.
.png "Exemple de barres d’outils multiples")
<div class="sampleToolBar" data-win-control="WinJS.UI.ToolBar">
<!-- Primary commands -->
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdEdit',
label:'edit',
section:'primary',
type:'button',
icon: 'edit',
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdFavorite',
label:'favorite',
section:'primary',
type:'toggle',
icon: 'favorite',
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdDelete',
label:'delete',
section:'primary',
type:'button',
icon: 'delete',
onclick: Sample.outputCommand}"></button>
<!-- Secondary commands -->
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdSettings',
label:'settings',
section:'secondary',
type:'button',
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdShare',
label:'share',
section:'secondary',
type:'button',
onclick: Sample.outputCommand}"></button>
</div>
<div class="sampleToolBar2" data-win-control="WinJS.UI.ToolBar">
<!-- Primary commands -->
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdBold',
section:'primary',
type:'toggle',
icon: 'bold',
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdItalic',
section:'primary',
type:'toggle',
icon: 'italic',
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdUnderline',
section:'primary',
type:'toggle',
icon: 'underline',
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdEmoticon',
section:'primary',
type:'button',
icon: 'emoji',
onclick: Sample.outputCommand}"></button>
<!-- Secondary commands -->
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdSettings',
label:'settings',
section:'secondary',
type:'button',
onclick: Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdShare',
label:'share',
section:'secondary',
type:'button',
onclick: Sample.outputCommand}"></button>
</div>
<div class="status"></div>
WinJS.Namespace.define("Sample", {
outputCommand: WinJS.UI.eventHandler(function (ev) {
var status = document.querySelector(".status");
var command = ev.currentTarget;
if (command.winControl) {
var label = command.winControl.label || command.winControl.icon || "button";
var section = command.winControl.section || "";
var msg = section + " command " + label + " was pressed";
status.textContent = msg;
}
})
});
WinJS.UI.processAll();
Créer une barre d’outils avec des commandes ajoutées à l’aide de WinJS.Binding.List
WinJS.Binding.List peut être utilisé pour remplir une barre d’outils avec des commandes via la propriété data de la barre d’outils.
.png "Exemple de barre d’outils avec des commandes issues de WinJS.Binding.List")
<div class="imperativeToolBar" data-win-control="WinJS.UI.ToolBar"
data-win-options="{data: Sample.commandList}"></div>
<div class="status"></div>
WinJS.Namespace.define("Sample", {
commandList: null,
outputCommand: WinJS.UI.eventHandler(function (ev) {
var status = document.querySelector(".status");
var command = ev.currentTarget;
if (command.winControl) {
var label = command.winControl.label || command.winControl.icon || "button";
var section = command.winControl.section || "";
var msg = section + " command " + label + " was pressed";
status.textContent = msg;
}
})
});
var dataArray = [
new WinJS.UI.Command(null,
{ id: 'cmdEdit', label: 'edit', section: 'primary', type: 'button', icon: 'edit', onclick: Sample.outputCommand }),
new WinJS.UI.Command(null,
{ id: 'cmdDelete', label: 'delete', section: 'primary', type: 'button', icon: 'delete', onclick: Sample.outputCommand }),
new WinJS.UI.Command(null,
{ id: 'cmdFavorite', label: 'favorite', section: 'primary', type: 'toggle', icon: 'favorite',
onclick: Sample.outputCommand }),
new WinJS.UI.Command(null,
{ id: 'cmdOpenWith', label: 'open with', section: 'primary', type: 'button', icon: 'openfile',
onclick: Sample.outputCommand }),
new WinJS.UI.Command(null,
{ id: 'cmdDownload', label: 'download', section: 'primary', type: 'button', icon: 'download',
onclick: Sample.outputCommand }),
new WinJS.UI.Command(null,
{ id: 'cmdPin', label: 'pin', section: 'primary', type: 'button', icon: 'pin', onclick: Sample.outputCommand }),
new WinJS.UI.Command(null,
{ id: 'cmdZoom', label: 'zoom', section: 'primary', type: 'button', icon: 'zoomin', onclick: Sample.outputCommand }),
new WinJS.UI.Command(null,
{ id: 'cmdFullscreen', label: 'full screen', section: 'primary', type: 'button', icon: 'fullscreen',
onclick: Sample.outputCommand })
];
Sample.commandList = new WinJS.Binding.List(dataArray);
WinJS.UI.processAll();
Personnaliser la barre d’outils
Les couleurs par défaut de la barre d’outils sont définies par les feuilles de style ui-dark.css ou ui-light.css, en fonction de la feuille de style chargée. Vous pouvez personnaliser les couleurs de la barre d’outils en remplaçant les règles CSS appropriées. Dans cet exemple, la couleur d’arrière-plan de la barre d’outils est définie pour être transparente et la couleur d’arrière-plan de la zone de débordement de la barre d’outils est personnalisée de manière à correspondre à l’image d’arrière-plan.
.png "Exemple de barre d’outils personnalisée")
<div class="image">
<img src="/pages/toolbar/images/Sunset.jpg" alt="" />
<div data-win-control="WinJS.UI.ToolBar">
<!-- Primary commands -->
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdEdit',
label:'edit',
section:'primary',
type:'button',
icon: 'edit'}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdFavorite',
label:'favorite',
section:'primary',
type:'toggle',
icon: 'favorite'}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdDelete',
label:'delete',
section:'primary',
type:'button',
icon: 'delete'}"></button>
</div>
</div>
/* Add your CSS here */
body {
background-color: rgb(112,112,112);
}
#content {
text-align: center;
overflow: hidden;
}
.image {
position: relative;
margin: auto;
margin-top: 50px;
margin-bottom:50px;
}
img {
max-width: 100%;
}
.win-toolbar-actionarea {
background: transparent;
}
.win-toolbar-overflowarea {
background-color: rgb(74, 61, 78);
border: 0;
}
WinJS.UI.processAll();
Remarques
Ces scénarios de codage sont consultables plus en détail sur le site web Essayer WinJS. Jouez avec le code et voyez immédiatement le résultat.