Question

我有一个可能很容易的问题，但我只是忽略了。

所以我创建了一个带有单个按钮的应用栏，按下时会创建一个弹出菜单。创建按钮以便它可以保存图像。

<button class="app-button" style="-ms-high-contrast-adjust:none" data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'appButton',icon:'url(images/logo.png)',section:'global', type: 'flyout', flyout:select('#appFlyout')}">
</button>

在我的弹出式菜单上，我将用一个项目列表填充它，但目前我只是硬编码了一个图像列表，使用CSS为每个按钮提供图像。

<div id="appFlyout" data-win-control="WinJS.UI.Flyout" aria-label="App Menu" style="visibility: visible;">
    <ul class="appList" list-style-type: none style="width: 127.5px;">
        <li id="app1List"><button id="app1" class="appButton"></button></li>
        <li id="app2List"><button id="app2" class="appButton"></button></li>
        <li id="app3List"><button id="app3" class="appButton"></button></li>
        <li id="app4List"><button id="app4" class="appButton"></button></li>
        <li id="app5List"><button id="app5" class="appButton"></button></li>
        <li id="app6List"><button id="app6" class="appButton"></button></li>
    </ul>
</div>

从短期来看，我只需要通过我的JavaScript来更新我的应用栏上的按钮，并在弹出菜单中点击按钮的图像。我正在使用空白的Windows应用商店应用，所以一切都在默认位置。（css / html / javascript）。

我尝试创建一个更新按钮然后将该函数添加到app1的事件监听器的函数，以便单击它将更新appbar图像，但它不起作用。回顾一下构造不良的列表（正如我所说的那样，暂时只是暂停），是否有更好的方法可以做到这一点，或者我需要做的是如何思考并为弹出窗口中的每个按钮添加一个事件监听器菜单？

Answer 1

考虑对弹出窗口中的列表使用WinJS.UI.ListView控件。如果您之前没有使用过listview，请参阅quickstart sample。

它可以绑定到一个列表，每个项目代表一个按钮img。使用iteminvoked事件处理程序为appbar中的appbar命令设置所选按钮图像。

下面不是完整的代码。但部分代码，给出一个想法。

var buttonFilePaths = [ 
{ iconFilePath: '/images/button1.png' }, 
{ iconFilePath: '/images/button2.png'}, 
{ iconFilePath: '/images/button3.png'}];
var list = new WinJS.Binding.List(buttonFilePaths);
// bind this list data source to the listview control.
listview.winControl.itemDataSource = list.dataSource;

// register for iteminvoked event when the item is tapped;
listView.addEventListern('iteminvoked', function (event)
{
    var selectedIndex = event.detail.itemIndex;
    var item = list.getAt(selectedIndex);
    appButton.winControl.icon = item.iconFilePath; 
});

html：

<div id='listview' data-win-control="WinJS.UI.ListView'
  data-win-options="{ tapBehavior: 'invokeOnly', selectionMode: 'none', swipeBehavior: 'none'
     , itemTemplate: select('#itemTemplate')}" >
</div>
<div id='itemTemplate' data-win-control='WinJS.Binding.Template'>
    <div class='list-item'>
        <img data-win-bind='src: iconFilePath' />
    </div>
</div>

使用弹出菜单更新appbar按钮

1 个答案: