2

我是使用 HTML/Javascript 开发 Windows 8 应用程序的新手。

我想动态地在 appbar 中创建/删除按钮。

例如，我在 html 中有以下 appbar div。

<div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement: 'top'}">
    <button id="button" data-win-control="WinJS.UI.AppBarCommand" 
        data-win-options="{id:'button', label:'Button', icon:'add'}" type="button">
    </button>
</div>

我想替换一些动作触发的按钮，所以我所做的是在js中替换appbar div的innerHTML如下，但我得到的是appbar中一个奇怪的空白方块。

var appbar = document.getElementById("appbar");
var html = "<button data-win-control=\"WinJS.UI.AppBarCommand\" data-win-options=\"{id:'button', label:'Another Button', icon:'add'}\" type=\"button\"></button>";
appbar.innerHTML = html;

任何帮助表示赞赏。

谢谢，

4

2 回答 2

2

应用栏的建议是提前定义所有命令并使用hideCommands/showCommands来显示和隐藏应用栏本身的命令。

但是，如果您确实想自己动态创建命令，您只需要在代码中再添加一个步骤：

WinJS.UI.process(elementThatYouJustCreated);

这将创建 win 控件，并完成获取该控件设置的所有工作。

于 2012-09-21T04:12:05.027 回答
1

您应该考虑使用AppBarCommand对象上的属性，而不是使用原始 HTML 设置值。

var cmd = document.getElementById('button'); 
cmd.winControl.icon = 'add'; 
cmd.winControl.label = 'Another Button';

MSDN 上的 AppBar 控件示例深入展示了这一点：http: //code.msdn.microsoft.com/windowsapps/App-bar-sample-a57eeae9/

于 2012-09-21T03:53:30.813 回答