Windows Store App 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页设定为应用程序启动时默认显示的页面，即应用程序的主页。
在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页面。
接下来编辑TargetPage.html页面，打开TargetPage.html文件可以发现，与HomePage.html文件一样，文件中已经默认包含一个header元素和一个section元素，header元素中定义了“后退”导航按钮和页面的标题，section元素中包含一个p元素显示一段文本。这里更改页面的标题为“欢迎进入TargetPage页面”，并设置其大小为h3；删除section元素及其内部的p元素，代码片段如下所示：
<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 单击“下一个页面”按钮的效果图
Windows Store App JavaScript 开发：页内导航的更多相关文章
- Windows Store App JavaScript 开发：简单对象绑定
简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到HTML元素的属性.下面通过一个示例来演示如何使用HTML5和JavaScript开发一个实现简单对象绑定的Windows应用商店应用 ...
- Windows Store App JavaScript 开发：页面加载
在开发基于JavaScript的Windows应用商店应用时,可以使用HtmlControl和PageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlCont ...
- Windows Store App JavaScript 开发：小球运动示例
通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...
- Windows Store App JavaScript 开发：WinJS库控件
在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListVie ...
- Windows Store App JavaScript 开发：获取文件和文件夹列表
在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...
- Windows Store App JavaScript 开发：模板绑定
WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...
- Windows Store App JavaScript 开发：选取文件和文件夹
前面提到过,文件打开选取器由FileOpenPicker类表示,用于选取或打开文件,而文件夹选取器由FolderPicker类表示,用来选取文件夹.在FileOpenPicker类中,pickSing ...
- Windows Store App JavaScript 开发：文件选取器
正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存储在指定位置.文件选取器分为对文件进 ...
- Windows Store App Image开发示例
通过上面的介绍,读者已经了解了Image对象及ImageBrush对象的使用方法和常用属性,在实际的开发工作中,比较常用的是Image对象,下面以一个幼儿园识物识字卡应用为例,来帮助读者更好的理解Im ...
随机推荐
- ThinkPHP之登录验证
验证方面写的不是很完整,正在完善当中 <?php /** * Created by dreamcms. * User: Administrator * Date: 2016/9/5 * Time ...
- asp之缓存 cachestate
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- java Http编程小结
1:什么是HTTP? 超文本传输协议(HyperText Transfer Protocol -- HTTP)是一个设计来使客户端和服务器顺利进行通讯的协议. HTTP在客户端和服务器之间以reque ...
- python 给定n，返回n以内的斐波那契数列
方式一:函数 def fabs(n): a, b = 0, 1 while b < n: print(b, end=' ') a, b = b, a+b fabs(1000) 方式二:列表 re ...
- 一步一步安装UEFI分区方式的windows 10 企业版
发现很多坛友不会安装UEFI分区的windows 10 从启动设置,到分区,到最后的引导与激活都是很大的问题. 在我看来这是最不容易出错的安装方式适合于刚刚上手的菜鸟,自己按照图片一步一步的就可以安装 ...
- [SAP ABAP开发技术总结]选择屏幕——各种屏幕元素演示
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 从C++到GO
从C++到GO 刚开始接触Go语言,看了两本Go语言的书,从c++开发者的角度来看看go语言的新特性,说下自己感触较深的几点: 并发编程 Go语言层面支持协程,将并发业务逻辑从异步转为同步,大幅提高开 ...
- fonts.googleapis.com 加载慢的解决方法
把:fonts.googleapis.com 替换成 fonts.useso.com
- MFC编程入门之二十六（常用控件：滚动条控件ScrollBar）
回顾上一节,讲的是组合框控件Combo Box的使用.本节详解滚动条控件Scroll Bar的相关内容. 滚动条控件简介 滚动条大家也很熟悉了,Windows窗口中很多都有滚动条.前面讲的列表框和组合 ...
- Servlet实现简单CRUD
1.首先在数据库中建表 create database student create table stu( sno char(10), sna char(10), ) insert stu value ...