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 ...
随机推荐
- 【HDU2255】奔小康赚大钱-KM算法
Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem Description ...
- shell crontab执行结果不同问题处理
shell脚本手工执行结果正确,但是放到crontab中执行,结果却是错误的. 脚本执行的路径肯定是没有问题的,比较怀疑crontab执行和手工执行两者的环境不同,在手工执行脚本时,通过ssh登录到服 ...
- js 、jsdoc生成33
============== js 点击事件后没方法名,调用有方法名 document.getElementById('lind').onclick=abc;//传统的id选择器 中没有# 哦 fun ...
- command 'x86_64-linux-gnu-gcc' failed with exit status 1错误及解决方案
Ubuntu16.04安装Scrapy(pip install Scrapy)时提示错误如下: Failed building wheel for cryptography Running setup ...
- 《.Net 的冰与火之歌》寄雁传书，你必须知道的C#参数知识大盘点
引言 参数,也叫参变量,是一个变量.在方法签名中随处可见,实现了不同方法间对于数据的寄雁传书,基本上充斥在代码的各个角落里.在方法签名或者原型中,方法名称后的括号包含方法的参数及其类型的完整列表.参数 ...
- ubuntu和windows上pip和windows上conda国内源更新module
ubuntu上: -i http://pypi.douban.com/simple --trusted-host pypi.douban.com # pip install web.py -i htt ...
- 获取div或者元素相对于屏幕坐上角的绝对位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 轻松解决U盘中病毒，文件变成.exe执行文件的问题
U盘中的文件都变成.exe可执行文件是怎么回事?告诉你,你的U盘中病毒了,那么如何清除呢?小编现在就告诉你几个简单方法,轻松就能搞定U盘中病毒问题. 方法1: (1)首先使用杀毒软件把U盘杀杀毒,除去 ...
- c# 正则提取小例子
常用分组语法 分类 代码/语法 说明 捕获 (exp) 匹配exp,并捕获文本到自动命名的组里 (?<name>exp) 匹配exp,并捕获文本到名称为name的组里,也可以写成(?'na ...
- 用SignalR实现实时查看WebAPI请求日志
实现的原理比较直接,定义一个MessageHandler记录WebAPI的请求记录,然后将这些请求日志推送到客户端,客户端就是一个查看日志的页面,实时将请求日志展示在页面中. 这个例子的目的是演示如何 ...