win8:通过模版创建Navigation App
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。
在pages的目录下添加目录page2，add Item ，选择Page Control。生成page2.html、page2.js 和 page2.css。 page2.js 为你预定义了一些函数，ready、unload、updataLayout。 你可以在page2安排你需要的东西。
下面进行页面跳转，你在home.html中：
Go to page 2.
只是这样的话，就只是把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中
Next Page
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。
页:
[1]