Question

我正在尝试仅在用户从列表视图中选择项目时显示App Bar。我已经通过使用appBar.show（）和appBar.hide（）方法显示了应用栏，但它不是唯一可以显示的时间。

当我右键单击页面并且没有选择任何内容时，应用栏仍会显示。我怎么能阻止它显示？

Answer 1

我在我的免费电子书Programming Windows Store Apps with HTML, CSS, and JavaScript (2nd edition)中，在应用栏部分（第480页）中回答：

提示要防止app / nav栏出现，您可以执行以下操作之一的东西。首先，要防止应用栏或导航栏出现（对于任何手势），将控件的disabled属性设置为true。其次，如果你想阻止它，比如右键单击一个特定元素（如画布），听取contextmenu （右键单击）该元素和调用的事件处理程序中的eventArgs.preventDefault（）。

Answer 2

经过大量研究后，我发现自己最好的选择是允许应用栏自然显示并显示/隐藏命令。

<div id="appBar"
     data-win-control="WinJS.UI.AppBar"
     data-win-options="{placement:'bottom', layout:'commands'}">
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'switchTradeDirection',
        type:'button',
        label:'Switch Direction',
        section:'selection'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'secondary1',
        type:'button',
        label:'Secondary1',
        section:'selection'}"></button>
    <div data-win-control="WinJS.UI.AppBarCommand"
         data-win-options="{ id: 'list',
     extraClass:'multiSelect',
     type: 'content',
     label:'List',
     section: 'selection'}">
        <select class="options">
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
            <option>Option4</option>
        </select>
    </div>
</div>

在js文件中：

var appBarDiv = document.getElementById('appBar');
var appBar = appBarDiv.winControl;
if (selectedCount == 2) {
    appBar.showCommands(appBarDiv.querySelectorAll('.multiSelect'));
    appBar.sticky = true;
    appBar.show();
} else {
    appBar.hide();
    appBar.hideCommands(appBarDiv.querySelectorAll('.multiSelect'));
    appBar.sticky = false;
}

在WinJS中右键单击停止显示AppBar控件

2 个答案: