Win10系列: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 单击"下一个页面"按钮的效果图
Win10系列:JavaScript页内导航的更多相关文章
- Windows Store App JavaScript 开发:页内导航
页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...
- 用 Markdown 写作(一)——添加文章页内导航
Markdown 可以用更简化的标记来写文章,基本的语法可以参考Markdown 语法说明 (简体中文版). 我平时很少按照论文的写法去写博客,说来忏愧,因为很少写技术性的文章,最近看到百度百科和很多 ...
- Jetpack系列:应用内导航的正确使用方法
今天小编要分享的还是Android Jetpack库的基本使用方法,本篇介绍的内容是Jetpack Navigation组件,让我们一起学习,为完成年初制定的计划而努力吧! *** 组件介绍 导航,是 ...
- Win10系列:JavaScript页面导航
页面导航是在开发应用的过程中使用频率较高的技术,其中比较常用的导航方式有多页导航和页内导航,采用多页导航方式的应用程序包含一系列的页面,在一个页面中加入另一个页面的链接地址后,单击链接将跳转到指定页面 ...
- Win10系列:JavaScript综合实例2
在项目中添加一个名为pages的文件夹,并在pages文件夹里面再添加一个名为mainPage的文件夹,接着在mainPage文件夹里添加一个"页面控制"项,命名为mainPage ...
- Win10 UWP 开发系列:使用SplitView实现汉堡菜单及页面内导航
在Win10之前,WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式,可以左右切换,非常方便.全景视图因为对设计要求比较高,自己总是做不出好的效果.对于一般的新闻阅读类Ap ...
- [Flex] ButtonBar系列——arrowKeysWrapFocus属性如果为 true,则使用箭头键在组件内导航时,如果击中某一端则将折回。
<?xml version="1.0" encoding="utf-8"?> <!--arrowKeysWrapFocus 如果为 true, ...
- jwplayer播放器停止 单页内多个jwplayer对象停止问题
单页内多个jwplayer对象停止问题,一直没有找到单页内多个jwplayer播放器停止问题,点击其中一个停止其他播放器; 整个播放代码Remove(),这样就可以停止了,也在ie下防止暂停不了.重音 ...
- Fixed Responsive Nav – 响应式的单页网站导航插件
Fixed Responsive Nav 是一个响应式的,固定的,触摸友好的单页网站导航插件,响应式导航,流畅的动画滚动.该项目采用渐进增强构建,支持工作在 IE6 及以上版本的浏览器. 你可以给导航 ...
随机推荐
- Eclipse添加EGIT方法
1. 安装EGIT, 其中一个方法: 2. 新建javaweb项目,测试git的使用. l File > Team > Share Project 选择GIT 如何选择不了,则选择创建c ...
- 力扣(LeetCode)202. 快乐数
编写一个算法来判断一个数是不是"快乐数". 一个"快乐数"定义为:对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和,然后重复这个过程直到这个数变为 ...
- leecode第二十题(有效的括号)
class Solution { public: bool isValid(string s) { ,end=s.size()-; )//万万没想到,他把空字符串当成true了 return true ...
- CC2 条理分明-----AACTP教你谈恋爱
AACTP是一个神奇的地方,这里可以培养你的自信,培养你的沟通表达能力,培养你的领导管理能力:但是你不知道的是AACTP还可以培养你恋爱的本领.想知道是怎么回事吗?听我给你慢慢说来.我把恋爱分为三 ...
- centos/redhat 删除虚拟网桥virbr0
kvm虚拟化环境安装好后,ifconfig会发现多了一个虚拟网卡virbr0. 这是由于安装和启用了libvirt服务后生成的,libvirt在服务器(host)上生成一个 virtual netw ...
- English trip EM2-LP-6A Teacher:Julia
课上内容(Lesson) How many children are in the family? there are 16 kids How old is the oldest child? He' ...
- java.lang.NoClassDefFoundError: org/springframework/web/context/WebApplicationContext
一.NoClassDefFoundError与ClassNotFoundException NoClassDefFoundError错误的发生,是因为Java虚拟机在编译时能找到合适的类,而在运行时不 ...
- LeetCode--002--两数相加(java版)
给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和 ...
- ssh登陆报错:packet_write_wait: Connection to x.x.x.x port 22: Broken pipe
ssh登陆报错:packet_write_wait: Connection to x.x.x.x port 22: Broken pipe 参考文章: https://patrickmn.com/as ...
- p1215
一开始没用数组,没成功.后来确定用深搜后,用数组.出现一个不同的abc状态就记录下来,以免重复.一开始要倒的肯定是c杯,之后出现新状态要递归dfs3次.另外发现algorithm里的copy是原数组在 ...