在default.html文件中完成添加PageControlNavigator控件之后，接下来在default.js文件中添加代码以定义应用程序激活、挂起时的行为。首先定义一个变量nav，并为其赋值以获得对WinJS.Navigation命名空间的引用，代码片段如下所示：

var nav = WinJS.Navigation;

接着在语句"args.setPromise(WinJS.UI.processAll());"后添加代码，以使应用程序激活时PageControlNavigator控件中显示其home属性值指向的页面。代码片段如下所示：

nav.navigate(Application.navigator.home);

在上面的代码中，调用nav.navigate函数导航到PageControlNavigator控件的home属性值指定的页面。其中Application.navigator.home是navigator.js文件中定义的一个变量，代表PageControlNavigator控件的home属性，Application是navigator.js文件中声明的命名空间名称。

接下来编辑HomePage.html页面的内容，打开HomePage.html文件可以发现，文件中已经默认包含一个header元素和一个section元素。header元素中定义了"后退"导航按钮和页面的标题，"后退"按钮的功能由PageControlNavigator控件实现，当单击这个按钮时将返回到导航历史记录中的上一个页面，在本示例中由于HomePage页面是首先加载的页面，因此这个按钮将不可用。section元素中包含一个p元素用于显示一段文本。这里将header元素中页面的标题更改为"欢迎进入HomePage页面"，并设置其大小为h3，删除section元素中的p元素，再在section元素内添加一个按钮，用于导航到下一个页面，代码片段如下所示：

<body>

<div class="HomePage fragment">

<header aria-label="Header content" role="banner">

<button class="win-backbutton" aria-label="Back" disabled type="button"></button>

<h3 class="titlearea win-type-ellipsis">

<span class="pagetitle">欢迎进入HomePage页面</span>

</h3>

</header>

<section aria-label="Main content" role="main">

<br />

<button id="NextPageButton">下一个页面</button>

</section>

</div>

</body>

完成前台界面的布局后，打开HomePage.js文件可以发现，文件内已经默认包含了一个匿名函数，并在匿名函数内部调用了WinJS.UI.Pages.define函数。WinJS.UI.Pages.define函数有两个参数，其中第二个参数是一个对象，下面在该对象的ready函数内添加代码，为"下一个页面"按钮注册单击事件处理函数NextPageButton_Click，代码片段如下所示：

WinJS.UI.Pages.define("/HomePage/HomePage.html", {

ready: function (element, options) {

//为按钮添加单击事件监听器

var nextPageButton = document.getElementById("NextPageButton");

nextPageButton.addEventListener("click", NextPageButton_Click);

}

});

上面的代码通过document对象的getElementById函数获得id属性值为NextPageButton的元素对象，并赋值给nextPageButton变量，然后通过nextPageButton变量调用元素对象的addEventListener函数注册单击事件的处理函数NextPageButton_Click。

下面在WinJS.UI.Pages.define函数的后面编写NextPageButton_Click函数的代码，实现从HomePage.html页面导航到TargetPage.html页面，代码片段如下所示：

function NextPageButton_Click () {

WinJS.Navigation.navigate("/TargetPage/TargetPage.html");

}

代码调用WinJS.Navigation.navigate函数实现从HomePage.html页面跳转到地址为"/TargetPage/TargetPage.html"的页面，即TargetPage.html页面。

<body>

<div class="TargetPage fragment">

<header aria-label="Header content" role="banner">

<button class="win-backbutton" aria-label="Back" disabled type="button"></button>

<h3 class="titlearea win-type-ellipsis">

<span class="pagetitle">欢迎进入TargetPage页面</span>

</h3>

</header>

</div>

</body>

启动调试，应用程序界面上显示"default页"、"欢迎进入HomePage页面"文本和"下一个页面"按钮，如图19-8所示。单击"下一个页面"按钮，应用程序界面将显示TargetPage.html页面的内容，如图19-9所示。单击TargetPage.html页面中的返回按钮时，应用程序界面显示HomePage.html页面，如图19-8所示。

图19-8 初始状态效果图 19-9 单击"下一个页面"按钮的效果图

最新文章