javascript - 如何通过 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

当你像这样创建一个胜利控件时:

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示例。