Win10系列:JavaScript页内导航
Posted 冯瑞涛(2009年已经停止更新)请加微信:iterryfen
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Win10系列:JavaScript页内导航相关的知识,希望对你有一定的参考价值。
页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于javascript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用PageControlNavigator控件加载其他页面的内容。WinJS.Navigation.navigate函数以一个包含页面地址的对象为参数,在该函数执行时将触发WinJS.Navigation.onnavigated事件并把页面地址传递给该事件。PageControlNavigator控件具有处理WinJS.Navigation.onnavigated事件的功能,它接收onnavigated事件包含的页面地址信息,加载并显示页面地址对应的页面内容。
PageControlNavigator是使用网格应用程序模板的JavaScript的Windows应用商店项目中预定义的一个控件,可以新建一个使用网格应用程序模板的JavaScript的Windows应用商店项目,在项目的js文件夹中找到navigator.js文件并添加到自己的项目中,以实现对PageControlNavigator控件的引用。
下面通过一个示例来演示如何使用html5和JavaScript开发一个实现页内导航的Windows应用商店应用。在这个应用程序中将包含三个页面,其中一个作为框架页面用于加载其他页面,另外两个作为被加载页面。
在Visual Studio 2012中新建一个JavaScript的Windows应用商店的空白应用程序项目,将其命名为SinglePageNavigation。接下来向项目中添加被加载页面,在项目根目录下新建两个文件夹,分别命名为HomePage和TargetPage,在HomePage文件夹中添加一个"页面控制"项,命名为HomePage,添加完成之后HomePage文件夹下会包含三个文件,名称分别为HomePage.html、HomePage.js和HomePage.css。以同样的方法继续在TargetPage文件夹下添加一个名为TargetPage的"页面控制"项,这样就完成了项目创建的工作。
由于在本项目中会用到导航控件PageControlNavigator,因此需要先在项目中添加定义这个控件的navigator.js文件,方法是在项目的js文件夹上单击右键,选择"添加"à"现有项",找到本地文件中的navigator.js文件并添加到项目中。
添加完成后在default.html文件中引用navigator.js文件,打开default.html文件,在head元素中添加以下代码片段:
<script src="/js/navigator.js"></script>
引用了navigator.js文件之后,在default.html文件的body元素中添加一个h2元素和一个PageControlNavigator控件,h2元素用于显示default页的标题,PageControlNavigator控件用于加载其他页面,代码片段如下所示:
<body>
<h2>default页</h2>
<div id="ContentHost" data-win-control="Application.PageControlNavigator" data-win-options="{home: \'/HomePage/HomePage.html\'}"></div>
</body>
上面的代码将div元素的data-win-control属性赋值为Application.PageControlNavigator,定义一个PageControlNavigator控件,其中Application是navigator.js文件中定义的命名空间名称,在这个命名空间中定义了PageControlNavigator控件。然后通过div元素的data-win-options属性,设置PageControlNavigator的home属性值为HomePage.html页面的地址,将HomePage页设定为应用程序启动时默认显示的页面,即应用程序的主页。
nav.navigate(Application.navigator.home);
<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>
<section aria-label="Main content" role="main">
<button id="NextPageButton">下一个页面</button>
WinJS.UI.Pages.define("/HomePage/HomePage.html", {
ready: function (element, options) {
var nextPageButton = document.getElementById("NextPageButton");
nextPageButton.addEventListener("click", NextPageButton_Click);
function NextPageButton_Click () {
WinJS.Navigation.navigate("/TargetPage/TargetPage.html");
接下来编辑TargetPage.html页面,打开TargetPage.html文件可以发现,与HomePage.html文件一样,文件中已经默认包含一个header元素和一个section元素,header元素中定义了"后退"导航按钮和页面的标题,section元素中包含一个p元素显示一段文本。这里更改页面的标题为"欢迎进入TargetPage页面",并设置其大小为h3;删除section元素及其内部的p元素,代码片段如下所示:
<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>
图19-8 初始状态效果图 19-9 单击"下一个页面"按钮的效果图
以上是关于Win10系列:JavaScript页内导航的主要内容,如果未能解决你的问题,请参考以下文章