码迷,mamicode.com
首页 > 编程语言 > 详细

Win10系列:JavaScript页内导航

时间:2017-03-30 13:44:31      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:rgs   ack   标题   target   跳转   声明   代码   disabled   本地   

页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScriptWindows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用PageControlNavigator控件加载其他页面的内容。WinJS.Navigation.navigate函数以一个包含页面地址的对象为参数,在该函数执行时将触发WinJS.Navigation.onnavigated事件并把页面地址传递给该事件。PageControlNavigator控件具有处理WinJS.Navigation.onnavigated事件的功能,它接收onnavigated事件包含的页面地址信息,加载并显示页面地址对应的页面内容。

PageControlNavigator是使用网格应用程序模板的JavaScriptWindows应用商店项目中预定义的一个控件,可以新建一个使用网格应用程序模板的JavaScriptWindows应用商店项目,在项目的js文件夹中找到navigator.js文件并添加到自己的项目中,以实现对PageControlNavigator控件的引用。

下面通过一个示例来演示如何使用HTML5JavaScript开发一个实现页内导航的Windows应用商店应用。在这个应用程序中将包含三个页面,其中一个作为框架页面用于加载其他页面,另外两个作为被加载页面。

Visual Studio 2012中新建一个JavaScriptWindows应用商店的空白应用程序项目,将其命名为SinglePageNavigation。接下来向项目中添加被加载页面,在项目根目录下新建两个文件夹,分别命名为HomePageTargetPage,在HomePage文件夹中添加一个"页面控制"项,命名为HomePage,添加完成之后HomePage文件夹下会包含三个文件,名称分别为HomePage.htmlHomePage.jsHomePage.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.homenavigator.js文件中定义的一个变量,代表PageControlNavigator控件的home属性,Applicationnavigator.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页内导航

标签:rgs   ack   标题   target   跳转   声明   代码   disabled   本地   

原文地址:http://www.cnblogs.com/finehappy/p/6645364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!