页内导航是在一个页面内根据需要加载其他页面的内容，在开发基于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 单击"下一个页面"按钮的效果图

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

  1. Windows Store App JavaScript 开发：页内导航

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

  2. 用 Markdown 写作(一)——添加文章页内导航

    Markdown 可以用更简化的标记来写文章,基本的语法可以参考Markdown 语法说明 (简体中文版). 我平时很少按照论文的写法去写博客,说来忏愧,因为很少写技术性的文章,最近看到百度百科和很多 ...

  3. Jetpack系列：应用内导航的正确使用方法

    今天小编要分享的还是Android Jetpack库的基本使用方法,本篇介绍的内容是Jetpack Navigation组件,让我们一起学习,为完成年初制定的计划而努力吧! *** 组件介绍 导航,是 ...

  4. Win10系列：JavaScript页面导航

    页面导航是在开发应用的过程中使用频率较高的技术,其中比较常用的导航方式有多页导航和页内导航,采用多页导航方式的应用程序包含一系列的页面,在一个页面中加入另一个页面的链接地址后,单击链接将跳转到指定页面 ...

  5. Win10系列：JavaScript综合实例2

    在项目中添加一个名为pages的文件夹,并在pages文件夹里面再添加一个名为mainPage的文件夹,接着在mainPage文件夹里添加一个"页面控制"项,命名为mainPage ...

  6. Win10 UWP 开发系列：使用SplitView实现汉堡菜单及页面内导航

    在Win10之前,WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式,可以左右切换,非常方便.全景视图因为对设计要求比较高,自己总是做不出好的效果.对于一般的新闻阅读类Ap ...

  7. [Flex] ButtonBar系列——arrowKeysWrapFocus属性如果为 true，则使用箭头键在组件内导航时，如果击中某一端则将折回。

    <?xml version="1.0" encoding="utf-8"?> <!--arrowKeysWrapFocus 如果为 true, ...

  8. jwplayer播放器停止 单页内多个jwplayer对象停止问题

    单页内多个jwplayer对象停止问题,一直没有找到单页内多个jwplayer播放器停止问题,点击其中一个停止其他播放器; 整个播放代码Remove(),这样就可以停止了,也在ie下防止暂停不了.重音 ...

  9. Fixed Responsive Nav – 响应式的单页网站导航插件

    Fixed Responsive Nav 是一个响应式的,固定的,触摸友好的单页网站导航插件,响应式导航,流畅的动画滚动.该项目采用渐进增强构建,支持工作在 IE6 及以上版本的浏览器. 你可以给导航 ...

随机推荐

  1. Android主页Activity对多个Fragment实现不同的沉浸式标题（图片或者文字标题）

    提示:讲解的该例实现是 FragmentTabHost + Fragment 实现: 1.示例效果图: 2.场景需求: 如示例图所示,在首页实现轮播图的沉浸,而 “发现” 和“我的”页是标题的沉浸. ...

  2. 《剑指offer》第四十五题（把数组排成最小的数）

    // 面试题45:把数组排成最小的数 // 题目:输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼 // 接出的所有数字中最小的一个.例如输入数组{3, 32, 321},则打印出这3 ...

  3. Flask-SQLAlchemy基本操作

    db.session.rollback() 回滚"""Role.query.get(2) get查询接收的参数为主键,如果不存在,返回空 >>> Use ...

  4. Angular 学习笔记 ( timezone + moment + material date-picker + date pipe + asp.net core )

    参考 : https://stackoverflow.com/questions/29979609/time-conversion-with-timezoneinfo-for-past-years h ...

  5. jquery判断设备是否是手机

    //判断是否是手机 function IsMobile() { var isMobile = { Android: function () { return navigator.userAgent.m ...

  6. 动态加载DataGrid表头及数据

    初始化表头 js生成前端 /*初始化表头*/ function initDataGridTitle(id) { $.ajax({ url: '/${appName}/report/***/***', ...

  7. centos 安装 和 linux 简单命令

    1. centos 安装 参照:https://www.cnblogs.com/tiger666/articles/10259102.html 安装过程注意点: 1. 安装过程中的选择安装Basic ...

  8. 6 Django REST framework JWT 和登录功能实现

    JWT 在用户注册或登录后,我们想记录用户的登录状态,或者为用户创建身份认证的凭证. 我们不再使用Session认证机制,而使用Json Web Token认证机制. Json web token ( ...

  9. Webpack实现路由懒加载的三种方式

    原文指路:https://blog.csdn.net/qq_37540004/article/details/78727063 第一种: 引入方式(正常引入): const router = new ...

  10. 自动化（脚本）安装httpd服务

    思路: 1.检查传递的参数,httpd源码文件 2.检查执行脚本的用户是否为root 3.检查rpm是否安装过httpd,若安装过,则卸载 4.安装编译所需的工具 5.从网上下载httpd源码 6.配 ...