建网站为什么每年都要续费,抖音seo优化系统招商,建站素材图片,2022年编程语言官方排行榜页面导航是在开发应用的过程中使用频率较高的技术#xff0c;其中比较常用的导航方式有多页导航和页内导航#xff0c;采用多页导航方式的应用程序包含一系列的页面#xff0c;在一个页面中加入另一个页面的链接地址后#xff0c;单击链接将跳转到指定页面#xff0c;从而…页面导航是在开发应用的过程中使用频率较高的技术其中比较常用的导航方式有多页导航和页内导航采用多页导航方式的应用程序包含一系列的页面在一个页面中加入另一个页面的链接地址后单击链接将跳转到指定页面从而实现页面之间的导航。而页内导航方式是在一个页面内根据需要加载其他页面使用页内导航方式的应用程序仍然包含一系列的页面不同的是这些页面是顺序被加载到一个选定的页面区域中而不是从一个页面跳转到另一个页面。在传统的网站开发中通常使用多页导航的方式在开发基于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-controlWinJS.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 idShowRectangleButton显示矩形/buttonbr / br / canvas idContentCanvas/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 h2default页面/h2 div data-win-controlContentPage.pageControlName}/div /body 在上面的代码中通过将div元素的data-win-control属性设置为命名空间ContentPage下的pageControlName成员添加一个PageControl控件。 启动调试应用程序界面上显示default页面文本和显示矩形按钮单击显示矩形按钮将在按钮的下方显示一个红色的矩形如图19-7所示 图19-7 运行效果图 转载于:https://www.cnblogs.com/finehappy/p/6645353.html
