Win10系列:JavaScript页面导航

页面导航是在开发应用的过程中使用频率较高的技术,其中比较常用的导航方式有多页导航和页内导航,采用多页导航方式的应用程序包含一系列的页面,在一个页面中加入另一个页面的链接地址后,单击链接将跳转到指定页面,从而实现页面之间的导航。而页内导航方式是在一个页面内根据需要加载其他页面,使用页内导航方式的应用程序仍然包含一系列的页面,不同的是,这些页面是顺序被加载到一个选定的页面区域中,而不是从一个页面跳转到另一个页面。在传统的网站开发中,通常使用多页导航的方式,在开发基于JavaScript的Windows应用商店应用时多采用默认的页内导航方式。在本节内容中,将首先讲解两种加载页面的方法,然后介绍如何实现页内导航。

19.2.1 页面加载

在开发基于JavaScript的Windows应用商店应用时,可以使用HtmlControl和PageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlControl控件接收一个包含页面地址的对象作为参数,并根据这个地址加载相应的页面;PageControl控件是自定义控件,可以使用WinJS.UI.Pages.define函数将一个页面定义为PageControl控件,然后在其他页面中使用,使用这个PageControl控件就相当于加载了该控件相对应的页面。下面首先介绍如何使用HtmlControl控件加载一个页面。

1HtmlControl控件

在开发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"是被加载页面的地址。

2PageControl控件

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 运行效果图

转载于:https://www.cnblogs.com/finehappy/p/6645353.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417016.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java maven调用hbase

pom.xml <dependency><groupId>org.apache.hbase</groupId><artifactId>hbase-it</artifactId><version>1.2.0</version> </dependency> 源码 import java.io.IOException; import java.util.ArrayList; import java.util.…

前端学习(2347):创建新页面和配置

pages.json {"pages": [ //pages数组中第一项表示应用启动页&#xff0c;参考&#xff1a;https://uniapp.dcloud.io/collocation/pages{"path" : "pages/message/message","style" : {"navigationBarTitleText": "信…

计算机与现代教育技术论文开题报告,计算机科学技术大学硕士与本科毕业论文开题报告...

这是一篇计算机科学技术方面有关毕业论文题目范文,与二维动画设计与制作相关毕业论文。是写论文专业与计算机科学技术及计算机软件及发表一篇方面相关的免费优秀学术论文范文资料&#xff0c;可作为计算机科学技术方面的大学硕士与本科毕业论文开题报告范文和职称论文论文写作参…

3.3、自定义错误页面

如果你在浏览器的地址栏中输入了不可用的路由&#xff0c;那么会显示一个状态码为 404 的错误页面。现在这个错误页面太简陋、平庸&#xff0c;而且样式和使用了 Bootstrap 的页面不一致。 像常规路由一样&#xff0c;Flask 允许程序使用基于模板的自定义错误页面。最常见的错误…

hive shell/sql 命令行

命令hive进入hive命令行 //列表数据库 show databases; //创建数据库 create database myhive; //创建数据库时检查存在与否 create database if not exists t1; //创建数据库时带注释 create database if not exists t2 comment learning hive; //创建带属性的数据库…

前端学习(2348):tabber

{"pages": [ //pages数组中第一项表示应用启动页&#xff0c;参考&#xff1a;https://uniapp.dcloud.io/collocation/pages{"path" : "pages/message/message","style" : {"navigationBarTitleText": "信息页",&…

辽宁交通职业技术学校计算机好不好,辽宁省交通高等专科学校信息工程系

信息工程系是学校“十一五”和“十二五”期间重点建设的校内五个重点专业群之一,也是首批国家高职示范校项目重点建设的专业群之一。现开设计算机网络技术、软件技术、计算机通信技术、图形图像制作、广告设计与制作、影视动画共6个专业,下设信息技术研究所和计算机基础、数学2…

[No0000D7]img生成器.bat合并所有图片到html网页中

ECHO OFF IF EXIST %~nx0.html DEL /F /Q %~nx0.html ECHO ^<html^>^<head^>^<title^>%~nx0^</title^>^</head^>^<body style"background:black;" οnlοad"window.setInterval(function(){window.scrollBy(0,800);},800);&qu…

前端学习(2349):tabber的其他属性

pages.json {"pages": [ //pages数组中第一项表示应用启动页&#xff0c;参考&#xff1a;https://uniapp.dcloud.io/collocation/pages{"path" : "pages/message/message","style" : {"navigationBarTitleText": "信…

计算机组成原理中ID是什么,计算机组成原理.doc

计算机组成原理课程作业_A 用户名&#xff1a;niekai最终成绩&#xff1a;80.0 HYPERLINK "//scores/?ag_id200580&assessmentid23539e75-90b3-487a-be10-06db93333cdd&stu_access_grading1&grading_curpage1&layoutwelcome_blank&role2&schoolG…

thinkphp无法登陆,session跨页后值为空

我已经出现过两次这种问题了&#xff0c;出现了两次就说明第一次没有解决彻底&#xff0c;所以表示thinkphp这个跨页后session为空而无法登陆的问题牵扯很多方面的问题了。经过这两次的研究&#xff0c;我觉得基本上能真正解决它了。 第一次出现的时候&#xff0c;我以为是目录…

前端学习(2350):condition启动模式配置

pages.json {"pages": [ //pages数组中第一项表示应用启动页&#xff0c;参考&#xff1a;https://uniapp.dcloud.io/collocation/pages{"path" : "pages/message/message","style" : {"navigationBarTitleText": "信…

PostgreSQL11 data数据库目录迁移

默认的数据库路径是/var/lib/pgsql/11/data 将现有的数据库文件全部拷贝到新的数据库路径下&#xff0c;然后重启 新建一个路径作为新的数据库数据路径&#xff0c;假如是/gdata/pgdata/data mkdir -p /gdata/pgdata/data chown -R postgres:postgres /gdata/pgdata/data c…

计算机硬件基础大纲,计算机硬件基础教学大纲..docx

计算机硬件技术基础 (III 教学大纲一、课程名称 :计算机硬件技术基础 (III二、课程代码 三、课程的基本要求1.微型计算机基础掌握微型计算机的组成以及各组成部分的主要功能特性 ;掌握微型计算机的总线结构以及简单的工作过程 ;了解现代先进计算机技术 ,了解衡量微型计算机性能…

C# WebApi POST 提交

暂时测试以json方式提交 Content-Type设置 Content-Type: application/json; charsetutf-8 提交参数 {"glsort": 6032,"page_index": 1,"page_size": 10 } WebApi接收 [HttpPost]public string List(dynamic data){int glsort Common.ObjectToI…

前端学习(2351):text组件的使用

detail.vue <template><view><view class""><text>唱歌跳舞</text></view><view seletable><text>唱歌跳舞</text></view><view seletable space"ensp"><text>唱歌 跳舞<…

电子信息工程跨考计算机武大,往届从材料跨考武大085208电子与通信工程初试303分 - 考研 - 小木虫 - 学术 科研 互动社区...

如果您因为分数原因没能如愿考上心目中理想的大学&#xff0c;只要您过了国家线B区分数线(按照往年的政策需要统考数学&#xff1a;参加数一或数二的考试)&#xff0c;材料、物理和化学相关专业&#xff0c;您可要参与报名参与桂林理工大学理学院的调剂,)&#xff0c;由于从201…

python连接postgresql数据库

连接postgresql数据库 pip install psycopg2 ## 导入psycopg2包 import psycopg2 ## 连接到一个给定的数据库 conn psycopg2.connect(database"postgres", user"postgres", password"postgres", host"127.0.0.1&…

前端学习(2352):view组件的使用

detail.vue <template><view><!-- <view class""><text>唱歌跳舞</text></view><view seletable><text>唱歌跳舞</text></view><view seletable space"ensp"><text>唱歌 …

Fatal error compiling: java.lang.ExceptionInInitializerError: com.sun.tools.javac.code.TypeTags

项目换用openjdk11后报错 Fatal error compiling: java.lang.ExceptionInInitializerError: com.sun.tools.javac.code.TypeTags 原因&#xff1a;lombok版本太低了&#xff0c;不支持java11 升级版本&#xff1a;到 1.18.6 <dependency> <groupId>org.projectl…