新增包含命令的工具列 (HTML)

發行項
03/04/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

ToolBar 是一個可解決命令延展性的簡單控制項。它具備其中命令可立即使用的 action area，以及其中命令已經隱藏但可在使用者要求時顯示的 overflow area。控制項可透過允許命令在空間有限時從主要區域動態移動至次要區域來支援調適性行為ToolBar並不一定要在應用程式中的單一位置，而是可以在多個不同位置 (例如 Splitview、Flyout 及 canvas 上) 找到。

注意下列程式碼案例可以在嘗試 WinJS 網站上更詳細地檢視。

建立以宣告方式新增命令的工具列

命令可以用宣告的方式新增至工具列。在此案例中，工具列有四個主要命令與兩個次要命令。

Dn972389.sample_toolbar(zh-tw,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();

指定群組並刪除較舊的命令。

開發人員可以指定將命令的順序群組或刪除至未遵循虛擬 RTL 順序的溢位區域。當螢幕空間有限時，這很有用。會依據從最高到最低值的順序刪除控制項。依照預設，會從右到左刪除控制項。但是並未定義優先順序的預設值。

Dn972389.grouping_order_toolbar(zh-tw,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();

一次顯示多個工具列

開發人員可以建立多個工具列並一次全部顯示。

多個工具列的範例

<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 可以用來透過工具列的 data 屬性產生包含命令的工具列。

含有來自 winjs 繫結清單之命令的工具列範例

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

自訂工具列

工具列的預設顏色是由 ui-dark.css 或 ui-light.css 樣式表設定，需視載入哪一個樣式表而定。您可以透過複寫適當的 CSS 規則來自訂工具列的顏色。在這個範例中，工具列的背景色彩是設定為透明，而工具列之溢位區域的背景色彩則是自訂為與其後方背景影像相符的顏色。

自訂工具列範例

<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 網站上更詳細地檢視。立即試用程式碼並查看結果。

共用方式為

新增包含命令的工具列 (HTML)

建立以宣告方式新增命令的工具列

指定群組並刪除較舊的命令。

一次顯示多個工具列

自訂工具列

備註

相關主題

其他資源

共用方式為

新增包含命令的工具列 (HTML)

建立以宣告方式新增命令的工具列

指定群組並刪除較舊的命令。

一次顯示多個工具列

建立使用 WinJS.Binding.List 新增命令的 ToolBar

自訂工具列

備註

相關主題

其他資源