如何使用HTML/Javascript替換Windows 8應用程序的appbar中的按鈕？

我是使用HTML/Javascript開發Windows 8應用程序的新手。如何使用HTML/Javascript替換Windows 8應用程序的appbar中的按鈕？

我想動態地在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>

我想更換一些動作觸發按鈕，所以我所做的就是更換appbar格如下在JS的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;

任何幫助表示讚賞。

感謝，

來源

2012-09-21 Junya Ishihara

的應用欄的建議是提前定義所有你的命令的時間和使用hideCommands/showCommands顯示&隱藏在appbar本身的命令。

但是，如果你想自己創建的命令，動態，你只需要一個步驟添加到您的代碼：

WinJS.UI.process(elementThatYouJustCreated);

這將創造雙贏的控制，並做的所有工作獲得控制設置。

來源

2012-09-21 04:12:05

這是正確的答案。 –

謝謝。這完美的作品。我將示例代碼放在gist上：https：//gist.github.com/3792867 –

而不是使用原始的HTML設定值，你應該考慮使用AppBarCommand對象的屬性。

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-21 03:53:30

這不會創建新元素;這只是編輯已經存在的那個。 –

非常感謝。我能夠編輯一個按鈕。這讓我暗示創建一個新元素。 –

如何使用HTML/Javascript替換Windows 8應用程序的appbar中的按鈕？

回答

相關問題