<div data-win-control="WinJS.UI.HtmlControl"単純にページを埋め込むだけならこれでOKです。が、埋め込まれたHTMLファイルを切り替えるには、JavaScriptによる操作が必要となります。
data-win-options="{uri: HTMLファイル }"></div>
WinJS.UI.Pages.render( HTMLファイル , はめこみ先のDOMオブジェクト );WinJS.UI.Pagesは、文字通りページを扱うための機能を提供するオブジェクトです。「render」は、指定のHTMLページをレンダリングして組み込むものです。引数には、はめ込むHTMLファイル名と、はめ込む<div data-win-control="WinJS.UI.HtmlControl">タグのDOMオブジェクトを指定します。
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
※default.htmlに追加するタグ <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{label:'First Page', section:'global'}" id="menubtn1"></button> <hr data-win-control="WinJS.UI.MenuCommand" data-win-options="{type:'separator', section:'global'}" /> <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{label:'Second Page', section:'global'}" id="menubtn2"></button> <hr /> <div id="container" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri:'page1.html'}"></div> ※app.onactivatedの処理 app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation. ApplicationExecutionState.terminated) {} else {} args.setPromise(WinJS.UI.processAll().then(function completed() { var menubtn1 = document.getElementById("menubtn1"); var menubtn2 = document.getElementById("menubtn2"); var menubtn3 = document.getElementById("menubtn3"); menubtn1.addEventListener("click", button1Click); menubtn2.addEventListener("click", button2Click); })); } } ※追加するイベント用関数 function button1Click(event) { var host = document.getElementById("container"); host.innerHTML = ""; WinJS.UI.Pages.render("page1.html", host); } function button2Click(event) { var host = document.getElementById("container"); host.innerHTML = ""; WinJS.UI.Pages.render("page2.html", host); }
<< 前へ |