添加帶有命令的工具欄 (HTML)

03/04/2016

本文內容

[ 本文適用于編寫 Windows 運行時應用的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果你要針對 Windows 10 進行開發，請參閱 最新文檔 ]

ToolBar 是一個簡單的控件，用于解決命令擴展問題。它具有一個 action area，其中的命令可以立即使用；還具有一個 overflow area，其中的命令處于隱藏狀態，但可以根據最終用戶發出的請求進行顯示。該控件通過在空間受限時，允許命令以動態方式從主要區域移動到輔助區域，從而支持自適應行為。 ToolBar 不限于某個應用中的單個位置，而可以位于如 Splitview、Flyout 等多個位置中以及 canvas 上。

注意??可以在嘗試 WinJS 網站上查看以下編碼方案的詳細信息。

創建帶有以聲明方式添加的命令的工具欄

可以以聲明方式將命令添加到工具欄。在此方案中，工具欄具有四個主要命令和兩個輔助命令。

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

同時顯示多個工具欄

開發人員可以創建多個工具欄，并同時顯示它們。

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 添加的命令的工具欄

WinJS.Binding.List 可用于通過帶有命令的工具欄的 data 屬性，填充該工具欄。

data-win-options="{data: Sample.commandList}">

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 規則來自定義工具欄的顏色。在此示例中，將工具欄的背景色設置為透明，將工具欄的溢出區域的背景色自定義為與它后面的背景圖像相匹配。

/* 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)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。