页面导航是在开发应用的过程中使用频率较高的技术，其中比较常用的导航方式有多页导航和页内导航，采用多页导航方式的应用程序包含一系列的页面，在一个页面中加入另一个页面的链接地址后，单击链接将跳转到指定页面，从而实现页面之间的导航。而页内导航方式是在一个页面内根据需要加载其他页面，使用页内导航方式的应用程序仍然包含一系列的页面，不同的是，这些页面是顺序被加载到一个选定的页面区域中，而不是从一个页面跳转到另一个页面。在传统的网站开发中，通常使用多页导航的方式，在开发基于JavaScript的Windows应用商店应用时多采用默认的页内导航方式。在本节内容中，将首先讲解两种加载页面的方法，然后介绍如何实现页内导航。

19.2.1 页面加载

在开发基于JavaScript的Windows应用商店应用时，可以使用HtmlControl和PageControl控件加载一个页面，这两个WinJS库控件曾在上面的内容中提到过，HtmlControl控件接收一个包含页面地址的对象作为参数，并根据这个地址加载相应的页面；PageControl控件是自定义控件，可以使用WinJS.UI.Pages.define函数将一个页面定义为PageControl控件，然后在其他页面中使用，使用这个PageControl控件就相当于加载了该控件相对应的页面。下面首先介绍如何使用HtmlControl控件加载一个页面。

）HtmlControl控件

在开发Windows应用商店应用时，有时候需要在一个页面中的某个位置显示另一个页面的内容，这时可以使用HtmlControl控件。HtmlControl控件具有一个名为"uri"的属性，该属性的值为被显示页面的地址，通过赋予该属性不同的值，可以在HtmlControl控件所在的位置加载不同的页面。

使用HtmlControl控件加载页面的方式如下：首先在一个HTML页面中添加一个HtmlControl控件，然后将HtmlControl控件的uri属性设置为被加载的地址。代码片段如下所示：

<body>

<div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/contentpage.html'}"></div>

</body>

在上面的代码中，在一个HTML页面的body元素下定义了一个div元素，通过将div元素的data-win-control属性设置为WinJS.UI.HtmlControl，添加了一个HtmlControl控件，接着使用data-win-options属性设置HtmlControl控件的uri属性，其中"/contentpage.html"是被加载页面的地址。

）PageControl控件

PageControl控件是一种自定义控件，可以将一个页面的内容和逻辑功能定义成一个PageControl控件，然后通过在其他页面中添加这个PageControl控件来加载相应的内容，使用PageControl控件可以方便地在其他不同页面中重用一个被定义好的页面内容。下面通过一个示例介绍如何定义和使用PageControl控件。

在Visual Studio 2012中新建一个JavaScript的Windows应用商店的空白应用程序项目，将其命名为ContentLoader，在项目中新建一个名为ContentPage的文件夹，并在这个文件夹下添加一个"页面控制"项，命名为ContentPage，添加完成之后ContentPage文件夹会包含三个文件，名称分别为ContentPage.html、ContentPage.js、ContentPage.css。

首先在ContentPage.html文件中布局应用的前台界面，打开ContentPage.html文件，可以发现body元素内已经默认包含了导航按钮、页面标题等内容，删除body元素内的代码然后添加一个按钮和一个画布，画布作为一个图形容器，当点击按钮时将在画布上绘制一个图形。代码片段如下所示：

<body>

<button id="ShowRectangleButton">显示矩形</button><br /> <br />

<canvas id="ContentCanvas"></canvas>

</body>

完成前台界面的布局之后，接下来实现ContentPage.html页面的逻辑功能。打开ContentPage.js文件可以发现，文件内已经默认包含了一个匿名函数，匿名函数中调用了WinJS.UI.Pages.define函数，用于创建一个PageControl控件。下面定义一个名为contentPageControl的变量，将WinJS.UI.Pages.define函数的返回值赋予该变量，用于在HTML页面中添加PageControl控件时使用。在ready函数内为id属性为"showRectangleButton"的元素添加click事件处理函数ShowRectangleButton_Click，代码片段如下所示：

var contentPageControl = WinJS.UI.Pages.define("/ContentPage/ContentPage.html", {

ready: function (element, options) {

var showRectangleButton = document.getElementById("ShowRectangleButton");

showRectangleButton.addEventListener("click", ShowRectangleButton_Click);

}

});

在上面的代码中，调用define函数之后将函数的返回值赋给contentPageControl变量，define函数接收了两个函数参数，一个参数为ContentPage.html页面的地址，另一个参数是一个对象，这个对象有一个ready函数，表示当页面准备就绪之后要做的逻辑处理，在ready函数内调用document对象的getElementById函数获取id属性值为ShowRectangleButton的元素对象，并为元素对象注册了单击事件处理函数ShowRectangleButton_Click。

下面实现ShowRectangleButton_Click函数，用于在ContentPage.html页面的画布中绘制一个矩形，代码片段如下所示：

function ShowRectangleButton_Click(eventInfo) {

var contentCanvas = document.getElementById('ContentCanvas');

var canvasContext = contentCanvas.getContext('2d');

canvasContext.fillStyle = '#FF0000';

canvasContext.fillRect(0, 0, 90, 100);

}

上面的代码调用document对象的getElementById 函数获得id属性值为ContentCanvas的元素对象，赋值给contentCanvas变量，并通过contentCanvas变量调用元素对象的getContext函数以"2d"为参数得到用于2D绘图的对象，赋值给canvasContext变量，接着使用canvasContext变量调用对象的fillStyle属性设置填充颜色，并调用fillRect函数向画布绘制一个矩形。

PageControl控件的定义包含在ContentPage.js文件的匿名函数内，由于匿名函数中定义的变量为局部变量，不能直接使用在项目的其他文件中，为此在ShowRectangleButton_Click函数的后面定义一个命名空间，以便通过命名空间引用PageControl控件。代码片段如下所示：

WinJS.Namespace.define("ContentPage", {

pageControlName: contentPageControl

});

在上面的代码中，调用WinJS.Namespace.define函数定义了一个命名空间ContentPage，在命名空间中添加了一个名为pageControlName的成员，将其值设置为前面定义的PageControl控件contentPageControl。

以上的过程实现了一个PageControl控件，接下来介绍如何在default.html页面中使用PageControl控件。打开项目中的default.html文件，在文件的head元素内引用ContentPage.js文件，代码片段如下所示：

<script src="/ContentPage/ContentPage.js"></script>

引用ContentPage.js文件之后，在default.html文件的body元素中添加一个h2和一个div元素，h2元素用于显示default.html页面的标题，div元素用于定义PageControl控件，代码片段如下所示：

<body>

<h2>default页面</h2>

<div data-win-control="ContentPage.pageControlName"}"></div>

</body>

在上面的代码中，通过将div元素的data-win-control属性设置为命名空间ContentPage下的pageControlName成员，添加一个PageControl控件。

启动调试，应用程序界面上显示"default页面"文本和"显示矩形"按钮，单击"显示矩形"按钮，将在按钮的下方显示一个红色的矩形，如图19-7所示：

图19-7 运行效果图

Win10系列：JavaScript页面导航的更多相关文章

  1. Win10系列：JavaScript页内导航

    页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...

  2. 【Win10】页面导航的实现

    注:本文基于 Windows 10 10240 及其 SDK 编写,若以后有变化,请以新版本为准. 页面导航我们是再熟悉不过了,浏览器.手机 App 大多都使用这种方式来展示内容.在 Windows ...

  3. javascript页面刷新的几种方法

    javascript refresh page 几种页面刷新的方法 本节内容:Javascript刷新当前页面的方法与实例. window.location.reload(),window.histo ...

  4. AngularJS(Part 10)--页面导航

    页面导航     过去,一个URL代表一个页面.但是随着Ajax的兴起,情况发生的很大的变化.不同的内容可以使用同一个URL.这让浏览器中的回退.前进甚至收藏按钮都失去了作用.而AngularJS提供 ...

  5. wp8.1 页面返回 页面导航

    public The_second() public second() { this.InitializeComponent(); Frame frame = Window.Current.Conte ...

  6. Windows Phone 8.1 新特性 - 页面导航

    本篇介绍一下Windows Phone 8.1 中页面导航的实现方式. 大家对Windows Phone 8 中页面导航的实现一定不陌生,我们使用 NavigationService 来实现.具体写法 ...

  7. WinPhone学习笔记（一）——页面导航与页面相关

    最近学一下Windows Phone(接下来简称“WinPhone”)的开发,在很久很久前稍探究一下WinPhone中对一些传感器的开发,那么现在就从头来学学WinPhone的开发.先从WinPhon ...

  8. C#泛型专题系列文章目录导航

    [C#泛型系列文章] 目录导航 第一部分:O'Reilly 出版的<C# Cookbook>泛型部分翻译 第一回:理解泛型 第二回:获取泛型类型和使用相应的泛型版本替换ArrayList ...

  9. wp8.1 Study1： 页面导航&页面间值传递

    摘要:wp8.1与wp8中很多API是不一样了,wp8.1把以前wp7.x时的api去掉了,更多与win8.1的API相似.比如以下的页面导航和页面之间的值传递 1.页面导航 利用Frame.Navi ...

随机推荐

  1. StringBuilderWriter 这个类需要commons.io.2.6这个包才可以使用, 在maven仓库中搜

  2. Java学习必备书籍推荐终极版！

    Java 基础 <Head First Java>(推荐,豆瓣评分 8.7,1.0K+人评价): 可以说是我的 Java 启蒙书籍了,特别适合新手读当然也适合我们用来温故 Java 知识点 ...

  3. leecode第三十三题（搜索旋转排序数组）

    class Solution { public: int search(vector<int>& nums, int target) { int len=nums.size(); ...

  4. 用aws cli 下载s3中数据到本地

    参考https://blog.csdn.net/DynastyRumble/article/details/76649120 1 首先注册AWS账户,绑定信用卡.一定要填写正确的手机,因为验证方式是它 ...

  5. Inception Network

    1. 下图为一个Inception 模块,即将输入的图像通过多种过滤器或者池化操作后,全部再给拼起来形成新的图像. 2. Inception 网络就是讲将多个Inception模块连起来而已,如下图的 ...

  6. JAVA基础知识总结：十二

    一.String类 字符串是一种特殊的对象,一旦被初始化就不能被改变了 字符串常量存储于常量池中 二.StringBuffer类 是一个字符串缓冲区,相当于一个容器 特点 a.可以对字符串进行增加和删 ...

  7. C#读取Excel表格的数据

    1.创建工程后,需要下载 EPPlus.dll 添加到工程中,这里有一个下载地址:https://download.csdn.net/download/myunity/10784634 2.下面仅实现 ...

  8. 日常英语---二、注册google的api的key

    日常英语---二.注册google的api的key 一.总结 一句话总结:register google api key register_google_api_key 1.请通过电子邮件向我发送有关 ...

  9. 非常好的一个CentOS 6.2 apache 2.4.2 编译教程

    除了以下2点,没有错的. 1)pcre-devel 需要安装 2)apr 和 apr-util 有了新的版本了 How to Install Apache 2.4.2 from Source on C ...

  10. SpringData Redis

    Redis spring-data-redis