在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件。

(1)ListView控件

在开发Windows应用商店应用时可以使用ListView控件以网格或列表的方式显示多条数据。ListView控件的常用属性有:

groupDataSource属性,用来设置分组的数据源。

groupHeaderTemplate属性,用来为分组的头部设置模板。

itemDataSource属性,用来为组中的数据项设置数据源。

itemTemplate属性,用来为组中的数据项设置模板。

selectionMode属性,用来设置数据项的选择模式,属性值有“none”、“single”和“multi”。当该属性的值为“none”时表示不允许选择数据项;当值为“single”时表示只可以选择一个数据项;当值为“multi”时表示可以选择多个数据项。

layout属性,用来设置ListView控件的布局,该属性的值是Object类型,属性值有“{type:WinJS.UI.GridLayout}”和“{ type:WinJS.UI.ListLayout}”。当该属性的值为“{type:WinJS.UI.GridLayout}”时,ListView控件会以网格形式显示数据;当值为“{ type:WinJS.UI.ListLayout}”时,ListView控件会以列表形式显示数据。

在应用程序中使用ListView控件来显示多条数据时,对ListView控件的不同操作会触发不同的事件,该控件的常用事件有:

oniteminvoked事件,当单击数据项时会触发该事件。

onkeyboardnavigating事件,使用键盘上的方向键改变选区内的焦点时会触发该事件。

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控件的常用属性有:

alignment属性,用于设置命令项的对齐方式,属性值有“center”、“left”和“right”,默认值为“center”。

commands属性,用于向菜单弹出窗口中添加命令。

hidden属性,用于判断Menu控件是否隐藏。

q  placement属性,用于设置菜单弹出窗口的默认位置,属性值有“auto”、“top”、“bottom”、“left”和“right”,默认值为“auto”。

当对Menu控件进行操作时,不同的操作会触发不同的事件,该控件的事件有:

onafterhide事件,命令菜单弹出窗口被隐藏之后会触发该事件。

onaftershow事件,命令菜单弹出窗口显示后会触发该事件。

onbeforehide事件,命令菜单弹出窗口被隐藏之前会触发该事件。

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库控件的更多相关文章

  1. Windows Store App JavaScript 开发:模板绑定

    WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...

  2. Windows Store App JavaScript 开发:页面加载

      在开发基于JavaScript的Windows应用商店应用时,可以使用HtmlControl和PageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlCont ...

  3. Windows Store App JavaScript 开发:获取文件和文件夹列表

    在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...

  4. Windows Store App JavaScript 开发:选取文件和文件夹

    前面提到过,文件打开选取器由FileOpenPicker类表示,用于选取或打开文件,而文件夹选取器由FolderPicker类表示,用来选取文件夹.在FileOpenPicker类中,pickSing ...

  5. Windows Store App JavaScript 开发:小球运动示例

    通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...

  6. Windows Store App JavaScript 开发:简单对象绑定

    简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到HTML元素的属性.下面通过一个示例来演示如何使用HTML5和JavaScript开发一个实现简单对象绑定的Windows应用商店应用 ...

  7. Windows Store App JavaScript 开发:页内导航

    页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...

  8. Windows Store App JavaScript 开发:文件选取器

    正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存储在指定位置.文件选取器分为对文件进 ...

  9. Win10系列:WinJS库控件

    在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListVie ...

随机推荐

  1. 关于php留言本网站的搭建

    1.检查php,http服务是否安装 [root@localhost ~]# rpm -qa | grep http httpd-tools--.el7.centos.x86_64 httpd--.e ...

  2. 在SpringMVC框架下实现文件的 上传和 下载

    在eclipse中的javaEE环境下:导入必要的架包 web.xml的配置文件: <?xml version="1.0" encoding="UTF-8" ...

  3. 安装tomcat

    一.JDK1.7安装 1.下载jdk,下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk-7u1-download-513 ...

  4. c++打开浏览器

    调用外部命令 如果用默认浏览器,就调用ShellExecute(NULL, _T("open"), _T("explorer.exe"), _T("h ...

  5. HQL查询——关联和连接

    HQL查询--关联和连接 为了便于理解有关的使用关联和连接进行HQL查询,首先提供两个具有关联关系的持久化类:Person类和MyEvent类 Person类: import javax.persis ...

  6. JS判断日期是否在同一个星期内,和同一个月内

    今天要用到判断日期是否在同一个星期内和是否在同一个月内,在网上找了好一会儿也没找到合适的,然后自己写了一个方法来处理这个问题,思路就不详细介绍了,直接附上代码,自己测试了一下 没有问题,若有问题请在评 ...

  7. Java开发中经典的小实例-(二分法)

    public int binarySearch(int[] data,int aim){//以int数组为例,aim为需要查找的数 int start = 0; int end = data.leng ...

  8. 第三讲. COTS包交换介绍

    COTS里面涉及到虚拟机的概念,所以网络稍微复杂一点点. 基本概念 目前虚拟机里面常见的网卡控制器有三类: 半虚拟化网卡设备,由Hypervisor统一管理,虚拟机里面采用特定的接口进行调用. 透传网 ...

  9. VERY DEEP CONVOLUTIONAL NETWORKS FOR LARGE-SCALE IMAGE RECOGNITION 这篇论文

    由Andrew Zisserman 教授主导的 VGG 的 ILSVRC 的大赛中的卷积神经网络取得了很好的成绩,这篇文章详细说明了网络相关事宜. 文章主要干了点什么事呢?它就是在在用卷积神经网络下, ...

  10. PHP绘图

    创建图像的一般流程1.设定标头,告诉浏览器你要生成的绘图类型.2.创建一个图像区域,以后的操作都将基于此图像区域.3.在空白图像区域绘制填充背景.4.在背景上绘制图形轮廓输入文本.5.输出最终图形.6 ...