Остановка элемента управления AppBar, отображаемого при щелчке правой кнопкой мыши в WinJS

Я пытаюсь показать только панель приложений, когда пользователь выбирает элемент из представления списка. У меня есть панель приложения, отображаемая с помощью методов appBar.show() и appBar.hide(), но это не единственный раз, когда ее можно показать.

Когда я щелкаю правой кнопкой мыши по странице и ничего не выделено, панель приложения все еще отображается. Как я могу остановить его показ?


appbar windows-store-apps winjs
person chris31389    schedule 21.11.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я отвечаю на этот вопрос в своей бесплатной электронной книге Программирование приложений Магазина Windows с помощью HTML, CSS и JavaScript (2-е издание) в разделе панели приложений (стр. 480):

Совет Чтобы предотвратить появление панели приложений/навигации, вы можете сделать одно из двух. Во-первых, чтобы панель приложения или панель навигации вообще не появлялись (для любого жеста), установите для свойства disabled элемента управления значение true. Во-вторых, если вы хотите предотвратить это, скажем, при щелчке правой кнопкой мыши на определенном элементе (например, на холсте), прослушайте событие contextmenu (щелчок правой кнопкой мыши) для этого элемента и вызовите eventArgs.preventDefault() в вашем обработчике.

person Kraig Brockschmidt - MSFT    schedule 22.11.2014

arrow_upward
0
arrow_downward

После долгих исследований я обнаружил, что лучшим вариантом для меня было разрешить естественное отображение панели приложений и вместо этого показывать/скрывать команды.

<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;
}
person chris31389    schedule 26.11.2014