WinJS에서 오른쪽 클릭으로 표시되는 AppBar 컨트롤 중지

Question

사용자가 목록보기에서 항목을 선택할 때 App Bar 만 표시하려고합니다. appBar.show() 및 appBar.hide() 메소드를 사용하여 보여주는 앱 표시 줄이 있지만 표시 할 수있는 유일한 시간은 아닙니다.

페이지를 마우스 오른쪽 단추로 클릭하고 아무 것도 선택하지 않으면 응용 프로그램 막대가 계속 표시됩니다. 어떻게 보여줄 수 있습니까?

Answer 1

내가 응용 프로그램 모음 섹션에서 내 무료 전자 책, Programming Windows Store Apps with HTML, CSS, and JavaScript (2nd edition)에서 (페이지 480)이 답 나타나지 응용 프로그램/탐색 모음을 방지하기 위해

팁, 두 가지 중 하나를 수행 할 수 있습니다. 먼저 앱 표시 줄이나 탐색 모음이 표시되지 않도록하려면 (모든 동작에 대해) 컨트롤의 disabled 속성을 true로 설정합니다. 둘째, 특정 요소 (예 : 캔버스)를 오른쪽 버튼으로 클릭하지 않으려면 해당 요소에 대한 컨텍스트 메뉴 (오른쪽 클릭) 이벤트를 듣고 eventArgs.preventDefault()를 호출하십시오. 귀하의 처리기 내에.

Answer 2

많은 연구 끝에 나 자신을위한 최상의 옵션은 앱 표시 줄이 자연스럽게 표시되고 대신 명령을 표시하거나 숨길 수 있음을 발견했습니다.

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; 
} 

다음 JS 파일에

<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>