如何在windows 8.1通用应用程序WinJS中设置屏幕顶部的appBar ?

Question

我尝试通过设置

将应用程序栏设置在屏幕顶部

var appBar = document.getElementById("commandsAppBar").winControl;
appBar.hide();
appBar.disabled = true;
appBar.layout = "custom";
appBar.placement = "top";

没有成功!我也试过

<div id="commandsAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{layout:'custom',placement:'top'}">
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdLink',label:'Link',icon:'link',tooltip:'Add Link'}"></button>
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdImage',label:'Image',icon:'camera',tooltip:'Add Image'}"></button>
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAudio',label:'Sound',icon:'audio',tooltip:'Add Audio'}"></button>
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdLocation',label:'Location',icon:'globe',tooltip:'Add Location'}"></button>
 </div>

我会把它放在底部，但它会影响高度的inputPane是在屏幕上，模糊了大多数自定义的可内容的div在屏幕上，当它调整大小，我需要屏幕调整大小，但它似乎没有考虑到额外的高度，应用程序栏添加，我不能再向下滚动!我试着玩隐藏和显示的inputPane事件，但我不能得到它产生一个整洁的结果…如果有人有一个解决方案，考虑到额外的高度的应用程序栏时，输入窗格显示，这也将是一个很大的帮助!

Answer 1

我们遇到了类似的问题。我们没有将appbar移动到顶部，而是让内容可滚动(overflow auto)，并添加了以下事件来调整内容容器的大小，这样appbar就不会遮挡任何内容:

appBar.winControl.addEventListener("aftershow", function () { appBarShowEvent(appBar, container); }, false);
appBar.winControl.addEventListener("beforehide", function () { appBarHideEvent(appBar, container); }, false);

function appBarHideEvent(appBarElement, containerElement) {
    var transition = {
        property: 'height',
        duration: 367,
        timing: "cubic-bezier(0.1, 0.9, 0.2, 0.1)",
        to: "100vh"
    };
    WinJS.UI.executeTransition(containerElement, transition);
}
function appBarShowEvent(appBarElement, containerElement) {
    var transition = {
        property: 'height',
        duration: 367,
        timing: "cubic-bezier(0.1, 0.9, 0.2, 0.1)",
        to: "calc(100vh - " + appBarElement.offsetHeight + "px)"
    };
    WinJS.UI.executeTransition(containerElement, transition);
}