Check：http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx
创建一个新项目，选择Navigation App作为模版。创建之后的目录：
- default.html，这是起始页。它最先被加载。它包含 PageControlNavigator（将每一页加载到主窗口）的一个实例。
- home.html，这是主页。它显示“欢迎”标题。
- default.js，指定当启动应用时应用的行为。
- home.js，指定与主页相关联的行为。
- navigator.js，它能实现 PageControlNavigator 对象，该对象支持 Metro 风格应用 JavaScript 模板的导航模型。
- default.css，为内容主体页面和应用整体指定 CSS 样式。
- home.css，为主页指定 CSS 样式。
defaul.html 现在只相当于一个容器里，里面加载home.html。
<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div>
在pages的目录下添加目录page2，add Item ，选择Page Control。生成page2.html、page2.js 和 page2.css。 page2.js 为你预定义了一些函数，ready、unload、updataLayout。 你可以在page2安排你需要的东西。
下面进行页面跳转，你在home.html中：
<!-- A hyperlink to page2.html. --> <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
只是这样的话，就只是把defaul换成page2了，如图：
我们想要的效果是：
要达到这样，就要用到WinJS.Navigation.navigated 。
在home.js中
// home.js
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); //绑定Handler
}
});
function linkClickEventHandler(eventInfo) {
eventInfo.preventDefault();//阻止默认的跳转
var link = eventInfo.target;
WinJS.Navigation.navigate(link.href);
}
})();
也可以利用button跳转，Check：http://msdn.microsoft.com/zh-cn/library/windows/apps/hh920268.aspx
在home.html中
<button class="navButton" title="Nav" >Next Page</button>
home.js
WinJS.UI.Pages.define("/pages/home/home.html", {
// . . .
ready: function (element, options) {
// . . .
},
nextPage: function () {
WinJS.Navigation.navigate("/pages/page2/page2.html");
}
});
继续在home.js 的ready中添加
ready: function(element, options) { // TODO: Initialize the fragment here. var elem = element.querySelector('.navButton'); elem.addEventListener('click', this.nextPage.bind(this)); }
Done！
这样就完成了利用模版创建导航界面的demo。
本文转自老Zhan博客园博客，原文链接：http://www.cnblogs.com/mybkn/archive/2012/09/24/2700620.html
，如需转载请自行联系原作者
