Rah*_*hur 4 windows-8 windows-runtime winjs
ELLO!
我有一个应用程序栏图标和点击事件 - 我添加了一个功能,其中包含以下代码:
function homePage() {
WinJS.Navigation.navigate("/home/homePage.html");
}
现在我有两个文件 - homePage.html里面/ home /和js文件相同.
id下一页的html上有一个简单的按钮.
在homePage.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按钮时 - 它会返回) - 但即使是初始页面传输也没有地点.
这是令人尴尬的问题,但我不能只是折叠我的手,等待一些神奇的事情发生.我一直在研究这个问题一小时 - 阅读视频和样本,但它根本不起作用.
会很感激帮助 - 我无法弄清楚出了什么问题.谢谢!
该WinJS.Navigation命名空间提供状态和历史管理,但它实际上并没有做导航本身.要从一个页面移动到另一个页面,您需要为WinJS.Navigation命名空间中的一个事件定义处理函数- 这使您可以以WinJS.Navigation.navigate对您的应用有意义的方式响应对该方法的调用.
作为演示,这里有一个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,我已经定义了div其元素id是contentTarget.这是我的内容中用户单击NavBar命令时将加载新文件的位置.
澄清:您想要替换的所有内容都需要进入contentTarget元素.否则,您将看到显示的旧内容和新内容的混合.
这里是连接它的JavaScript文件(这是homePage.js我在上面的HTML文件中添加了一个脚本元素的文件):
(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>
| 归档时间： |
|
| 查看次数： |
5144 次 |
| 最近记录： |