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未设置，会记录错误。有什么想法吗？

以下是我尝试过的内容：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中，有许多win-control示例使用html + javascript + css编写。

如何通过Javascript创建WinJS弹出窗口

1 个答案: