我有一个应用程序栏图标和点击事件 – 我添加了一个功能,其中包含以下代码:
function homePage() { Winjs.Navigation.navigate("/home/homePage.html"); }
现在我有两个文件 – homePage.html里面/ home /和js文件相同.
function () { "use strict"; Winjs.UI.Pages.define("/home/homePage.html",{ ready: function (element,options) { var button = document.getElementById("NextPage"); button.addEventListener("click",GoToNextPage); } }); function GoToNextPage() { Winjs.Navigation.navigate("/default.html"); } })();
但当我点击应用程序栏图标 – 没有任何反应:(
所以我打算完成的是当有人点击default.html上的appbar图标时 – 用户切换到homePage.html(然后当我点击homePage按钮时 – 它会返回) – 但即使是初始页面传输也没有地点.
这是令人尴尬的问题,但我不能只是折叠我的手,等待一些神奇的事情发生.我一直在研究这个问题一小时 – 阅读视频和样本,但它根本不起作用.
会很感激帮助 – 我无法弄清楚出了什么问题.谢谢!
解决方法
作为演示,这里是一个homePage.html文件,其中包含一个NavBar,其中包含一个将作为导航触发器的命令.
<!DOCTYPE html> <html> <head> <Meta charset="utf-8" /> <title>NavProject</title> <link href="//Microsoft.Winjs.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.Winjs.1.0/js/base.js"></script> <script src="//Microsoft.Winjs.1.0/js/ui.js"></script> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/homePage.js"></script> </head> <body> <div id="contentTarget"> <h1>Select a page from the NavBar</h1> </div> <div id="navbar" data-win-control="Winjs.UI.AppBar" data-win-options="{placement:'top'}"> <button data-win-control="Winjs.UI.AppBarCommand" data-win-options="{id:'NextPage',label:'Next Page',icon:'\u0031',section:'selection'}"> </button> </div> </body> </html>
与NavBar一起,我定义了id为contentTarget的div元素.这是我的内容中用户单击NavBar命令时将加载新文件的位置.
澄清:您想要替换的所有内容都需要进入contentTarget元素.否则,您将看到显示的旧内容和新内容的混合.
这里是连接它的JavaScript文件(这是我在上面的HTML文件中添加了一个脚本元素的homePage.js文件):
(function () { "use strict"; Winjs.Navigation.addEventListener("navigating",function (e) { var elem = document.getElementById("contentTarget"); Winjs.UI.Animation.exitPage(elem.children).then(function () { Winjs.Utilities.empty(elem); Winjs.UI.Pages.render(e.detail.location,elem) .then(function () { return Winjs.UI.Animation.enterPage(elem.children) }); }); }); var app = Winjs.Application; var activation = Windows.ApplicationModel.Activation; app.onactivated = function (args) { args.setPromise(Winjs.UI.processAll()); navbar.addEventListener("click",function (e) { if (e.target.id == "NextPage") { Winjs.Navigation.navigate("/nextPage.html"); } },true); }; app.start(); })();
请注意我是如何为Winjs.Navigation.navigating事件添加处理函数的.此事件由对Winjs.Navigation.navigate的调用触发,导航目标的详细信息包含在事件对象的detail.location属性中.
在这个例子中,我清除了目标元素中的任何内容,并将其替换为目标文件的内容,并设置从一个到另一个的过渡动画.
您只需要为事件定义一个处理程序.这意味着如果我在nextPage.html中有导致导航的元素,我只需要调用Winjs.Navigation.navigate而无需创建新的事件处理程序,如下所示:
<!DOCTYPE html> <html> <head> <title></title> <script> Winjs.UI.Pages.define("/nextPage.html",{ ready: function () { back.addEventListener("click",function () { Winjs.Navigation.navigate("/homePage.html"); }); } }); </script> </head> <body> This is next page. <button id="back">Back</button> </body> </html>