win8:通过模版创建Navigation App

vivion27

　　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。