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 ...
随机推荐
- 数据持久化以及DAO模式的简单使用
持久化:(是将程序中的数据在瞬时状态和持久状态间转换机制) 即把数据(如内存中的对象)保存到可永久保存的存储设备中(如磁盘).持久化的主要应用是将内存中的对象存储在关系型的数据库中,当然 ...
- HTML空格标签
双学位论文+本学位开题报告+实训项目+实训考试+学员考试,真是脑子都要爆炸... 话不多说,留个小知识点,HTML的空格替代符号表示法: 1. 半个空白,1个字符宽度: 或者 2.1个空白,2个 ...
- libevent源码分析：hello-world例子
hello-world是libevent自带的一个例子,这个例子的作用是启动后监听一个端口,对于所有通过这个端口连接上服务器的程序发送一段字符:hello-world,然后关闭连接. /* * gcc ...
- 个人项目制作（PSP）
计划: 软件的此功能的实现,个人估算需要一个周的时间. 开发阶段: 需求分析: 1> 运动员希望软件可以记录自己的得分项. 2> 运动员希望软件可以记录自己的得分具体细节. 3>运动 ...
- Mybatis-Spring集成
MyBatis-Spring用来将MyBatis无缝整合到Spring中.使用这个类库中的类, Spring将会加载必要的MyBatis工厂类和Session类. 这个类库也提供一个简单的方式来注入 ...
- Java生成带小图标的二维码-google zxing 工具类
近期一直忙于开发微信商城项目,应客户要求,要开发个有图标的二维码.经过两次改版,终于实现了该功能(第一次没有小图标,这次才整合好的),如下是完整代码 . 该代码使用Java7开发,另外使用 core- ...
- CSS学习心得2
CSS样式 链接 a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 当为链接的不同 ...
- 5.Swift枚举|结构体|类|属性|方法|下标脚本|继承
1. 枚举: ->在Swift中依然适用整数来标示枚举值,需搭配case关键字 enum Celebrity{ case DongXie,XiDu,Nandi,BeiGai } // 从左 ...
- VS2015 使用 Web Deploy 发布网站到 WindowsServer2008 R2服务器详解
使用原因:由于开发期间需要将开发出的网站随时提交到服务器以便公司高层随时访问所以要求将开发出的网站每天发布到服务器,频繁度比较高,因此不能再使用之前的方式(发布到本地后再拷贝文件到服务器),所以想到了 ...
- hightcharts 3d 堆积图下钻
图片效果 ***************代码部分****************************************************** <!doctype html> ...