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。

<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。