如何通过 Javascript 创建 WinJS Flyout

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，但看起来这些选项不起作用。 dom 中的 div（弹出窗口）没有我在上面设置的 ID。

我想在单击按钮时显示弹出窗口：

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

但很明显，因为没有设置 ID，所以记录了一个错误。有什么想法吗？

这是我尝试过的fiddle：https://jsfiddle.net/reko91/yg0rs4xc/1/

Answer 1

当你像这样创建一个 win-control 时：

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

id "formatTextFlyout" 只是这个弹出控件的 id。

但是你用document.getElementById("formatTextFlyout")方法找到这个控件，问题就在这里，这个方法只能找到Id为"formatTextFlyout"的html元素对象，并没有一。可以参考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 并且有一个 id "formatTextFlyout"。

补充：在网站Try WinJS中，有很多用html+javascript+css写的win-control示例。

如何通过 Javascript 创建 WinJS Flyout

How to create a WinJS Flyout via Javascript

html

javascript

winjs

win-universal-app