关键词：
页内导航是在一个页面内根据需要加载其他页面的内容，在开发基于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页设定为应用程序启动时默认显示的页面，即应用程序的主页。
nav.navigate(Application.navigator.home);
<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>
<section aria-label="Main content" role="main">
<button id="NextPageButton">下一个页面</button>
WinJS.UI.Pages.define("/HomePage/HomePage.html", {
ready: function (element, options) {
var nextPageButton = document.getElementById("NextPageButton");
nextPageButton.addEventListener("click", NextPageButton_Click);
function NextPageButton_Click () {
WinJS.Navigation.navigate("/TargetPage/TargetPage.html");
接下来编辑TargetPage.html页面，打开TargetPage.html文件可以发现，与HomePage.html文件一样，文件中已经默认包含一个header元素和一个section元素，header元素中定义了"后退"导航按钮和页面的标题，section元素中包含一个p元素显示一段文本。这里更改页面的标题为"欢迎进入TargetPage页面"，并设置其大小为h3；删除section元素及其内部的p元素，代码片段如下所示：
<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>
图19-8 初始状态效果图 19-9 单击"下一个页面"按钮的效果图
win10系列：javascript图形
...canvas元素会在页面上生成一个矩形的位图画布，可以使用JavaScript在画布上实时绘制图形图像。在绘制图形时，需要先调用画布的getContext函数获取与该画布相关的用于绘制图形（如2D图形、3D图形）的对象，然后使用这个对象调用... 查看详情
win10系列：javascript动画4
上面介绍的动画效果是通过Windows动画库创建的，这里的旋转动画是通过设置页面元素的style对象的相关属性来创建，此动画的效果是将界面元素沿着指定的方向进行旋转。下面介绍style对象的几个常用属性。transitionProperty：获取... 查看详情
win10系列：javascript模板绑定
WinJS库模板提供了一种格式化显示多条数据的便捷方式，通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式。定义一个WinJS库模板的方法与定义WinJS库控件的方法相似：在页面中添加一个div元素，将di... 查看详情
win10系列：javascript动画2
"重新定位"动画也是Windows动画库中的动画效果。"重新定位"动画的动画效果是指一个或一组元素移动到新的位置时，这些元素不是突然出现在新的位置，而是从一个位置移动到另一个位置。创建"重新定位"动画可以使用WinJS.UI.Anima... 查看详情
win10系列：javascript写入和读取文件
正如上面的内容中所提到的，文件保存选取器用于保存文件，通过Windows.Storage.Pickers命名空间中的FileSavePicker类的pickSaveFileAsync函数可以向指定的文件系统位置中保存一个文件。文件保存之后，还可以对其进行读写操作，如果是向... 查看详情
win10系列：javascript控件的使用
...的基本控件，如按钮和复选框；WinJS库控件是为开发基于JavaScript的Windows应用商店应用提供的新控件，如ListView、HtmlControl和PageControl等。下面首先介绍如何添加这两种类型的控件，然后介绍如何为控件注册事件处理函数和设计控... 查看详情
win10系列：javascript综合实例2
在项目中添加一个名为pages的文件夹，并在pages文件夹里面再添加一个名为mainPage的文件夹，接着在mainPage文件夹里添加一个"页面控制"项，命名为mainPage，添加完成之后会同时生成mainPage.html、mainPage.css和mainPage.js这三个文件。这里... 查看详情
win10系列：javascript动画3
"交叉进出"动画也是Windows动画库中的动画效果。"交叉进出"动画的动画效果是在应用程序界面上隐藏一个元素并同时在相同位置显示另一个元素的时候，被隐藏的元素渐消失在应用程序界面上，而将要显示的元素渐显示在应用程... 查看详情
win10系列：javascript综合实例4
实现主页面和分类页面的之后，最后来看一下菜肴页面的实现，这个页面用于详细介绍某项菜肴或主食，如名称、图片和具体做法等。在pages文件夹里面添加一个名为foodDetail的文件夹，并在foodDetail文件夹里添加一个"页面控制"项... 查看详情
win10系列：javascript综合实例1
上面几个小节讲解了使用HTML5和JavaScript语言开发Windows应用商店应用时会用到的一些技术，本小节将前面介绍的知识融合在一起创建一个菜谱应用程序，帮助读者更进一步地理解和掌握这些知识。此菜谱应用程序主要的功能是介... 查看详情
win10系列：javascript动画1
在应用程序中使用动画会使应用显得更加生动，进而给用户带来良好的视觉效果。例如，当用户将某个项添加到列表时，新项不会立即出现在列表中，而是采用动画形式到达相应位置，并且列表中的其他项也采用动画形式移动到... 查看详情
win10系列：javascript数据绑定
使用数据绑定可以使页面中元素的属性值与数据源中的数据同步，其中数据源可以来自数据库、文件以及自定义的数据等。在常用的数据绑定方法中，简单对象绑定是将HTML元素与一个仅包含数据的简单对象相绑定，模板绑定是... 查看详情
win10系列：javascript多媒体
在应用程序的日常使用中，经常会使用多媒体播放器来播放多媒体文件，包括视频、音频等，因此对于开发者来说，学习多媒体播放技术对开发应用是很有帮助的。本小节主要介绍如何使用HTML5和JavaScrip实现播放本地视频。想要... 查看详情
win10系列：javascript获取文件和文件夹列表
在应用程序中有时可能需要获取用户库中的内容，以便执行相关的操作。如果要获取某个用户库中的内容，需要先获取到这个用户库，获得用户库可以通过Windows.Storage命名空间中的KnownFolders类的相应属性来实现，可用属性包括doc... 查看详情
win10系列：javascript访问文件和文件夹
...门基于C#语言的详细讲解，本节主要介绍如何使用HTML5和JavaScript开发具有文件操作功能的Windows应用商店应用，首先来了解一下用于对文件或文件夹进行操作的文件选取器。19.4.1文件选取器正如前面章节C#语言中所介绍的，文件选... 查看详情
页内导航跳楼事件
目的：使用侧边栏实现业内导航。思路：一种是通过a标签链接的方式，一种是通过jQuery通过控制滚动条的scrollTop值来进行控制。这里重点介绍JQuery的方式，先写静态页面，然后在通过规律写出jQuery语句。布局如下（在这之前引... 查看详情
javascript页内mod库/carosel/slider（多个图像）(代码片段)
deepin_运维实践系列博客导航
...因此就在此系统上从头开始做一下自己的项目了。注：本系列大部分在Deepin15.11版本下完成,部分是DeepinV20完成2.进展2.1Deepin操作系统相关DeepinV20国产操作系统体验DeepinV20右键发送至博客园DeepinV20右键发送至为知笔记DeepinV20系统快... 查看详情