页面导航是在开发应用的过程中使用频率较高的技术，其中比较常用的导航方式有多页导航和页内导航，采用多页导航方式的应用程序包含一系列的页面，在一个页面中加入另一个页面的链接地址后，单击链接将跳转到指定页面，从而实现页面之间的导航。而页内导航方式是在一个页面内根据需要加载其他页面，使用页内导航方式的应用程序仍然包含一系列的页面，不同的是，这些页面是顺序被加载到一个选定的页面区域中，而不是从一个页面跳转到另一个页面。在传统的网站开发中，通常使用多页导航的方式，在开发基于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. C++.【转】C++数值类型与string的相互转换

    1.C++数值类型与string的相互转换 - JohnGu - 博客园.html(https://www.cnblogs.com/johngu/p/7878029.html) 2. 1.数值类型转换 ...

  2. JAVA创建子进程并处理waitFor() 阻塞问题

    虽然很想休息,但是想想还是要把今天学的东西记下来,不然以后再用还是新知识. 新建一个线程类读取子进程的汇报信息和错误信息,避免阻塞 class StreamGobbler extends Thread ...

  3. node启动服务报错Node.js Error: Cannot find module express

    在node文件夹中(M:\express-test),执行 npm install express 在使用npm安装express时,报npm WARN saveError ENOENT: no su ...

  4. image以最小边为标准填满正方形父级元素

    需求: 上传图片并实现预览, 图片以最小边为标准填满正方形的父级div,且不变形,且点击可以预览大图. 有两种实现方式: 1.div+img标签, 利用object-fit:cover,据说兼容性不好 ...

  5. 《剑指offer》第六十六题（构建乘积数组）

    // 面试题66:构建乘积数组 // 题目:给定一个数组A[0, 1, …, n-1],请构建一个数组B[0, 1, …, n-1],其 // 中B中的元素B[i] =A[0]×A[1]×… ×A[i ...

  6. 主动触发事件 自定义事件 trigger 及其用法

    1. 触发自定义事件方式 js.jq 2. jq 触发 2.1 默认支持的事件 $('#h').on('click',function(){ $(this).append('<p>p< ...

  7. git Bash下复制粘贴

    git复制:Ctrl+insert git粘贴:Shift+Insert git常用快捷键链接地址:https://www.jianshu.com/p/cc1fbd89e087 在gitHup上下载他 ...

  8. 第 6 章 存储 - 042 - 用 volume container 共享数据

    volume container volume container 是专门为其他容器提供 volume 的容器.它提供的卷可以是 bind mount,也可以是 docker managed volu ...

  9. R语言画点状误差线

    现在项目需要R语言做几个线性拟合,画一些点图,突然需要画误差线,网上找了下,可以用代码实现..效果如下 xx1<-c(xxxxxx,xxxx,xxxxx) yy1<-c(xxxxxx,xx ...

  10. JavaScript 第十章总结:first class functions

    前言 这一章的内容是 advanced knowledge and use of functions. 讲了关于 function 的使用的一些特殊的方面. function expression 的 ...