Как создать WinJS выпадающей с помощью Javascript

Question

В настоящее время у меня есть панель инструментов с некоторыми кнопками, вот как я его создать:

HTML

<div id="toolbarContainer1" style="direction: rtl"></div> 

Javascript

var dataArray= [ 
         new WinJS.UI.Command(null, { id: 'cmdView3', label: 'View3', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 3', onclick: function() { changeView('view3') } }), 
         new WinJS.UI.Command(null, { id: 'cmdView2', label: 'View2', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 2', onclick: function() { changeView('view2') } }), 
         new WinJS.UI.Command(null, { id: 'cmdView1', label: 'View1', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 1', onclick: function() { changeView('view1') } }) 
     ]; 

window.createImperativeToolBar = function() { 

      var tb = new WinJS.UI.ToolBar(document.querySelector("#toolbarContainer1"), { 
       data: new WinJS.Binding.List(dataArray) 
      }); 

      var thisToolbar = document.querySelector('#toolbarContainer1'); 
      thisToolbar.winControl.closedDisplayMode = 'full'; 
     } 

Я попытался сделать это следующим образом:

new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' }) 

Он добавляется в DOM, но похоже, что параметры не работают. В div (вылет) в dom нет идентификатора, как я установил выше.

Я хочу показать выпадающую на кнопку мыши:

function showFlyout() { 
      console.log('flyout'); 
      var formatTextButton = document.getElementById("formatTextButton"); 
      document.getElementById("formatTextFlyout").winControl.show(formatTextButton); 
     } 

Но, очевидно, потому что ID не приготовьтесь, ошибка получает в журнале. Есть идеи ?

Вот скрипка того, что я пробовал: https://jsfiddle.net/reko91/yg0rs4xc/1/

Answer 1

При создании обоюдного управления, как так:

new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' }) 

Идентификатор «formatTextFlyout» является только идентификатором этого плавающего контроля ,

Но вы используете метод document.getElementById("formatTextFlyout"), чтобы найти этот элемент управления, проблема здесь, этот метод может найти только объект элемента html с идентификатором «formatTextFlyout», и его нет. Вы можете обратиться к getElementById method.

Одно из решений здесь создается Flyout как так: HTML:

<div id="flyoutContainer"></div> 

Javascript:

var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' }); 

function showFlyout() { 
      console.log('flyout'); 
      var formatTextButton = document.getElementById("formatTextButton"); 
      document.getElementById("flyoutContainer").winControl.show(formatTextButton); 
     } 

Или

var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' }); 

function showFlyout() { 
      console.log('flyout'); 
      var formatTextButton = document.getElementById("formatTextButton"); 
      flyout.show(selectedButton); 
     } 

Если вы читали образец WinJS.UI.Flyout object там , вы найдете в html-файле, он создает Flyout так:

<div id="formatTextFlyout" data-win-control="WinJS.UI.Flyout" 
      aria-label="{Format text flyout}"> 

HTML-элемент div и имеет идентификатор "formatTextFlyout".

Дополнение: На веб-сайте Try WinJS есть много образцов контроля выигрыша, которые написаны с помощью html + javascript + css.