WinJS + Toolbar + DropDown List
http://stackoverflow.com/questions/34808708/can-a-select-drop-down-list-be-added-to-my-winjs-toolbar-via-javascript/35600683?noredirect=1#comment58888444_35600683
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/css/ui-light.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/base.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/ui.min.js"></script>
<link rel="stylesheet" href="https://vcms-spinifexgroup-com.s3.amazonaws.com/screen.css">
JavaScript
function clickbuttonprintout(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 viewsDataArray = [
new WinJS.UI.Command(null, {
id: 'cmdDelete',
label: 'delete',
section: 'primary',
type: 'button',
icon: 'delete',
tooltip: 'View 1',
onclick: clickbuttonprintout
}),
new WinJS.UI.Command(null, {
id: 'cmdFavorite',
label: 'favorite',
section: 'primary',
type: 'toggle',
icon: 'favorite',
tooltip: 'View 2',
onclick: clickbuttonprintout
}),
new WinJS.UI.Command(document.querySelector(".mySelectDiv"), {
id: 'cmdSelect',
label: 'edit',
section: 'primary',
type: 'content',
icon: 'favorite',
tooltip: 'View 3',
onclick: clickbuttonprintout
})
];
function createImperativeToolBar2() {
var tb = new WinJS.UI.ToolBar(document.querySelector("#toolbarContainer2"), {
data: new WinJS.Binding.List(viewsDataArray)
});
}
createImperativeToolBar2();