명령이 포함된 도구 모음 추가(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
ToolBar 은 명령 확장성을 해결하는 간단한 컨트롤입니다. 도구 모음에는 명령을 즉시 사용할 수 있는 action area과 명령이 숨겨져 있지만 최종 사용자의 요청 시 표시될 수 있는 overflow area이 있습니다. 이 컨트롤은 공간이 제한된 경우 명령이 동적으로 기본 영역에서 보조 영역으로 이동할 수 있도록 하여 적응형 동작을 지원합니다. ToolBar은 앱에서 단일 위치로 제한되지 않으며 Splitview, Flyout 및 canvas와 같은 다양한 위치에 있을 수 있습니다.
참고 다음 코딩 시나리오에 대한 자세한 내용은 WinJS 시도(영문) 웹 사이트에서 살펴볼 수 있습니다.
선언적으로 추가된 명령이 포함된 ToolBar 만들기
명령을 ToolBar에 선언적으로 추가할 수 있습니다. 이 시나리오에서 ToolBar에는 네 개의 기본 명령과 두 개의 보조 명령이 있습니다.
<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();
명령 그룹화 및 드롭아웃 순서 지정
개발자는 시각적 RTL 순서를 따르지 않는 넘침 영역에 대한 명령의 그룹화 및 드롭아웃 순서를 지정할 수 있습니다. 이는 화면 공간이 제한된 경우 유용합니다. 컨트롤은 최고 값에서 최저 값의 순서로 드롭아웃합니다. 기본적으로 명령은 오른쪽에서 왼쪽으로 드롭아웃됩니다. 그러나 우선 순위의 기본값은 정의되어 있지 않습니다.
<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();
한 번에 여러 ToolBar 표시
개발자는 여러 ToolBar를 만들어 한 번에 표시할 수 있습니다.
<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();
WinJS.Binding.List를 사용하여 추가된 명령이 포함된 ToolBar 만들기
WinJS.Binding.List를 사용하여 ToolBar의 data 속성을 통해 명령으로 ToolBar를 채울 수 있습니다.
<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();
ToolBar 사용자 지정
ToolBar의 기본 색은 로드되는 스타일시트에 따라 ui-dark.css 또는 ui-light.css 스타일시트에 의해 설정됩니다. 적절한 CSS 규칙을 재정의하여 ToolBar의 색을 사용자 지정할 수 있습니다. 이 예제에서 ToolBar의 배경색은 투명하게 설정되고 ToolBar 넘침 영역의 배경색은 뒤에 있는 배경 이미지에 맞게 사용자 지정됩니다.
<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();
설명
이러한 코딩 샘플 및 기타 코딩 샘플에 대한 자세한 내용은 WinJS 시도(영문) 웹 사이트에서 살펴볼 수 있습니다. 코드를 사용하여 결과를 즉시 확인해 보세요.