Windows Store App JavaScript 开发:WinJS库控件
在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件。
(1)ListView控件
在开发Windows应用商店应用时可以使用ListView控件以网格或列表的方式显示多条数据。ListView控件的常用属性有:
q groupDataSource属性,用来设置分组的数据源。
q groupHeaderTemplate属性,用来为分组的头部设置模板。
q itemDataSource属性,用来为组中的数据项设置数据源。
q itemTemplate属性,用来为组中的数据项设置模板。
q selectionMode属性,用来设置数据项的选择模式,属性值有“none”、“single”和“multi”。当该属性的值为“none”时表示不允许选择数据项;当值为“single”时表示只可以选择一个数据项;当值为“multi”时表示可以选择多个数据项。
q layout属性,用来设置ListView控件的布局,该属性的值是Object类型,属性值有“{type:WinJS.UI.GridLayout}”和“{ type:WinJS.UI.ListLayout}”。当该属性的值为“{type:WinJS.UI.GridLayout}”时,ListView控件会以网格形式显示数据;当值为“{ type:WinJS.UI.ListLayout}”时,ListView控件会以列表形式显示数据。
在应用程序中使用ListView控件来显示多条数据时,对ListView控件的不同操作会触发不同的事件,该控件的常用事件有:
q oniteminvoked事件,当单击数据项时会触发该事件。
q onkeyboardnavigating事件,使用键盘上的方向键改变选区内的焦点时会触发该事件。
q onselectionchanged事件,当选择发生改变时会触发该事件。
在介绍了ListView控件的常用属性和事件后,下面来看一下如何向页面中添加ListView控件,以及如何为ListView控件设置属性和注册事件处理函数。
可以通过在页面中定义一个div元素并将data-win-control属性设置为“WinJS.UI.ListView”来向页面中添加ListView控件,同时可以通过div元素的data-win-options属性设置ListView控件的属性。例如,要在一个页面中添加一个ListView控件并以网格形式显示数据,那么可以在这个页面的body元素内定义一个div元素,并将data-win-control属性设置为“WinJS.UI.ListView”,同时通过data-win-options属性设置ListView控件的layout属性值为“{type:WinJS.UI.GridLayout}”,相应的HTML代码片段如下所示:
<div id="listviewID" data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
添加了ListView控件之后,可以在后台使用addEventListener函数来为其注册相关事件的处理函数。例如为上面示例中的ListView控件注册oniteminvoked事件的处理函数InvokeItemHandler,相应的JavaScript代码片段如下所示:
var listview = document.getElementById("listviewID").winControl;
listview.addEventListener("iteminvoked", InvokeItemHandler);
function InvokeItemHandler() {
/* 在此处编写事件处理过程的代码 */
}
在上面的代码中,首先以“listviewID”作为参数调用document对象的getElementById函数并使用winControl属性获得id属性值为listviewID的元素对象,并赋值给变量listview。然后通过listview变量调用元素对象的addEventListener函数为oniteminvoked事件注册事件处理函数InvokeItemHandler,在InvokeItemHandler函数中编写处理这个事件的过程代码。
(2)HtmlControl控件
可以在一个页面中使用HtmlControl控件来显示另一个页面的内容。这个控件有一个uri属性,该属性的值为被显示页面的地址,通过赋予该属性不同的值,可在HtmlControl控件所在的位置加载不同的页面。与ListView控件类似,可以通过在一个页面的body元素中定义一个div元素并将data-win-control属性设置成“WinJS.UI.HtmlControl”来向这个页面中添加HtmlControl控件,同时可以通过div元素的data-win-options属性设置HtmlControl控件的属性。
例如,要在一个现有项目的default.html页面中显示项目根目录下的IncludedPage.html页面的内容,那么可以在default.html页面的body元素中定义一个div元素并将data-win-control属性设置成“WinJS.UI.HtmlControl”,同时通过div元素的data-win-options属性设置HtmlControl控件的uri属性值为IncludedPage.html页面的地址,相应的HTML代码片段如下所示:
<div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/IncludedPage.html'}"></div>
(3)PageControl控件
PageControl控件是一种自定义控件,可以将一个页面的内容和逻辑功能定义成一个PageControl控件,然后通过在其他页面中添加这个PageControl控件来加载相应的页面内容,这样就方便了在多个页面中加载相同的页面内容。
可以使用WinJS.UI.Pages命名空间下的define函数来将一个页面定义成PageControl控件,该函数有uri和members两个参数,其中uri表示页面的地址,members是对这个页面中的成员进行的一些初始化操作,该函数执行完成后会返回一个PageControl类型的对象,语法格式如下所示:
var pageControlObject = WinJS.UI.Pages.define(uri, members);
定义了PageControl控件后,如果想要向一个页面中添加这个控件,可以在该页面的body元素中定义一个div元素并将data-win-control属性设置为define函数所返回的PageControl对象,同时还需要在这个页面的head元素中引用定义PageControl控件的Javscript文件。
(4)Menu控件
在开发应用程序时使用Menu控件可以创建命令菜单弹出窗口。Menu控件的常用属性有:
q alignment属性,用于设置命令项的对齐方式,属性值有“center”、“left”和“right”,默认值为“center”。
q commands属性,用于向菜单弹出窗口中添加命令。
q hidden属性,用于判断Menu控件是否隐藏。
q placement属性,用于设置菜单弹出窗口的默认位置,属性值有“auto”、“top”、“bottom”、“left”和“right”,默认值为“auto”。
当对Menu控件进行操作时,不同的操作会触发不同的事件,该控件的事件有:
q onafterhide事件,命令菜单弹出窗口被隐藏之后会触发该事件。
q onaftershow事件,命令菜单弹出窗口显示后会触发该事件。
q onbeforehide事件,命令菜单弹出窗口被隐藏之前会触发该事件。
q onbeforeshow事件,已被隐藏的命令菜单弹出窗口显示前会触发该事件。
在介绍了Menu控件的常用属性和事件后,下面来看一下如何向页面中添加Menu控件,以及如何为Menu控件设置属性和注册事件处理函数。
通过在页面中定义一个div元素并将data-win-control属性设置为“WinJS.UI.Menu”可以向页面中添加Menu控件,但只能通过编写JavaScript代码的方式为Menu控件设置属性。例如,要向一个页面中添加一个Menu控件并设置命令项的对齐方式为左对齐,那么可以在这个页面的body元素内定义一个div元素并将div元素的data-win-control属性设置成“WinJS.UI. Menu”,为了能检索到这个div元素,设置它的id属性值为“menuID”。相应的HTML代码片段如下所示:
<div id="menuID" data-win-control="WinJS.UI.Menu"></div>
这样就向这个页面中添加了Menu控件,然后在后台编写JavaScript代码来设置这个Menu控件的alignment属性值为“left”,JavaScript代码片段如下所示:
var menuControl = document.getElementById("menuID").winControl;
menuControl.alignment = "left";
添加了Menu控件之后,除了能够后台设置控件的属性之外,还可以在后台使用addEventListener函数来为其注册相关事件的处理函数。例如,为上面示例中的Menu控件注册onafterhide事件的处理函数HideMenuHandler,相应的JavaScript代码片段如下所示:
var menuControl= document.getElementById("menuID").winControl;
menuControl.addEventListener("afterhide", HideMenuHandler);
function HideMenuHandler() {
/* 在此处编写事件处理过程的代码 */
}
在上面的代码中,首先以“menuID”作为参数调用document对象的getElementById函数并使用winControl属性获得id属性值为menuID的元素对象,并赋给变量menuControl。然后通过menuControl变量调用元素对象的addEventListener函数为onafterhide事件注册处理函数HideMenuHandler,在HideMenuHandler函数中编写处理这个事件的过程代码。
Windows Store App JavaScript 开发:WinJS库控件的更多相关文章
- Windows Store App JavaScript 开发:模板绑定
WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...
- Windows Store App JavaScript 开发:页面加载
在开发基于JavaScript的Windows应用商店应用时,可以使用HtmlControl和PageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlCont ...
- Windows Store App JavaScript 开发:获取文件和文件夹列表
在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...
- Windows Store App JavaScript 开发:选取文件和文件夹
前面提到过,文件打开选取器由FileOpenPicker类表示,用于选取或打开文件,而文件夹选取器由FolderPicker类表示,用来选取文件夹.在FileOpenPicker类中,pickSing ...
- Windows Store App JavaScript 开发:小球运动示例
通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...
- Windows Store App JavaScript 开发:简单对象绑定
简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到HTML元素的属性.下面通过一个示例来演示如何使用HTML5和JavaScript开发一个实现简单对象绑定的Windows应用商店应用 ...
- Windows Store App JavaScript 开发:页内导航
页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...
- Windows Store App JavaScript 开发:文件选取器
正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存储在指定位置.文件选取器分为对文件进 ...
- Win10系列:WinJS库控件
在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListVie ...
随机推荐
- 关于php留言本网站的搭建
1.检查php,http服务是否安装 [root@localhost ~]# rpm -qa | grep http httpd-tools--.el7.centos.x86_64 httpd--.e ...
- 在SpringMVC框架下实现文件的 上传和 下载
在eclipse中的javaEE环境下:导入必要的架包 web.xml的配置文件: <?xml version="1.0" encoding="UTF-8" ...
- 安装tomcat
一.JDK1.7安装 1.下载jdk,下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk-7u1-download-513 ...
- c++打开浏览器
调用外部命令 如果用默认浏览器,就调用ShellExecute(NULL, _T("open"), _T("explorer.exe"), _T("h ...
- HQL查询——关联和连接
HQL查询--关联和连接 为了便于理解有关的使用关联和连接进行HQL查询,首先提供两个具有关联关系的持久化类:Person类和MyEvent类 Person类: import javax.persis ...
- JS判断日期是否在同一个星期内,和同一个月内
今天要用到判断日期是否在同一个星期内和是否在同一个月内,在网上找了好一会儿也没找到合适的,然后自己写了一个方法来处理这个问题,思路就不详细介绍了,直接附上代码,自己测试了一下 没有问题,若有问题请在评 ...
- Java开发中经典的小实例-(二分法)
public int binarySearch(int[] data,int aim){//以int数组为例,aim为需要查找的数 int start = 0; int end = data.leng ...
- 第三讲. COTS包交换介绍
COTS里面涉及到虚拟机的概念,所以网络稍微复杂一点点. 基本概念 目前虚拟机里面常见的网卡控制器有三类: 半虚拟化网卡设备,由Hypervisor统一管理,虚拟机里面采用特定的接口进行调用. 透传网 ...
- VERY DEEP CONVOLUTIONAL NETWORKS FOR LARGE-SCALE IMAGE RECOGNITION 这篇论文
由Andrew Zisserman 教授主导的 VGG 的 ILSVRC 的大赛中的卷积神经网络取得了很好的成绩,这篇文章详细说明了网络相关事宜. 文章主要干了点什么事呢?它就是在在用卷积神经网络下, ...
- PHP绘图
创建图像的一般流程1.设定标头,告诉浏览器你要生成的绘图类型.2.创建一个图像区域,以后的操作都将基于此图像区域.3.在空白图像区域绘制填充背景.4.在背景上绘制图形轮廓输入文本.5.输出最终图形.6 ...