向页面中添加的控件可分为两种类型：标准的HTML控件和WinJS库控件。其中标准的HTML控件是指HTML标准中定义的基本控件，如按钮和复选框；WinJS库控件是为开发基于JavaScript 的Windows应用商店应用提供的新控件，如ListView、HtmlControl和PageControl等。下面首先介绍如何添加这两种类型的控件，然后介绍如何为控件注册事件处理函数和设计控件的样式。

（1）添加标准的HTML控件

向页面中添加标准的HTML控件可以通过定义相应的HTML元素来实现。例如要在某个页面中添加一个按钮，就可以在这个页面的body元素内定义一个button元素，HTML代码片段如下所示：

<button id="SaveButton"></button>

在上面的代码中，为按钮的id属性赋予了属性值SaveButton，用于唯一标识这个控件。

（2）添加WinJS库控件

WinJS库为开发JavaScript 的Windows应用商店应用提供了一些新控件，如Rating、ListView、HtmlControl、PageControl和FlipView控件等，这些控件统称为WinJS库控件。添加一个WinJS库控件与添加标准的HTML控件不同，WinJS库控件没有专用的HTML元素，在一个页面中无法通过定义ListView元素来添加一个ListView控件。

向页面中添加一个WinJS库控件有两种方式，HTML方式和JavaScript方式。HTML方式指的是定义一个标准的HTML元素，并将data-win-control属性设置为WinJS库控件类型来添加控件。例如，要在某个页面中添加一个Rating控件，可以在这个页面的body元素内定义一个div元素，然后将div元素的data-win-control属性设置成"WinJS.UI.Rating"，相应的HTML代码片段如下所示：

<body>

<div data-win-control="WinJS.UI.Rating"></div>

</body>

而JavaScript方式是在JavaScript代码中通过实例化WinJS库对象来添加控件，例如在某个页面中添加一个Rating控件，可以首先通过id属性获得一个标准HTML控件的元素对象，然后以这个元素对象为参数调用Rating构造函数，以下JavaScript代码片段获得id属性为RatingHost的元素对象，并以该元素对象为参数实例化一个Rating控件：

var ratingHost = document.getElementById("RatingHost");

var ratingControl = new WinJS.UI.Rating(ratingHost);

与添加一个控件相对应，设置一个控件的属性也有HTML和JavaScript两种方式。对于HTML方式，可以使用标准HTML控件的data-win-options属性来设置。例如，向某个页面中添加一个Rating控件，设置maxRating属性的值为5，averageRating属性的值为3，相应的HTML代码片段为：

<div id="RatingControlHost" data-win-control="WinJS.UI.Rating" data-win-options="{maxRating: 5, averageRating: 3}"></div>

对于JavaScript方式，设置一个控件属性的方法是直接为控件对象的属性赋值，例如上面的ratingControl对象，设置它的disabled属性值为true，相应的JavaScript代码片段如下所示：

ratingControl.disabled = true;

（3）为控件注册事件处理函数

为页面中的控件注册事件处理函数一般在JavaScript代码中使用addEventListener函数来实现。addEventListener函数有三个参数，分别是type、listener和useCapture。type参数指定触发的事件类型，listener代表type事件的处理函数，第三个参数useCapture为bool类型，当值为true时事件处理函数在type事件的捕获阶段执行，当值为false时事件处理函数在type事件的冒泡阶段执行。

这里简要介绍一下JavaScript的事件机制，元素事件的触发分为三个阶段：捕获阶段、目标阶段和冒泡阶段。当用户触发一个元素的某事件时，系统会从HTML文档的根元素到目标元素由外向内，检测每个元素是否注册了此事件的处理函数，如果已经注册并且useCapture 为true，则调用该事件处理函数，这是事件的捕获阶段。事件的目标阶段是指系统调用在目标元素本身注册的事件处理函数，这里的目标元素指用户与之交互的元素，比如用户点击一个div元素，那么此div元素就是目标元素。在冒泡阶段，系统从目标元素到根元素由内向外，检测每个元素是否注册了此事件的处理函数，如果注册了并且 useCapture为false，则调用该事件处理函数。

例如在一个id属性值为FirstDiv的div元素内依次嵌套了id属性值为SecondDiv、ThirdDiv、ForthDiv的div元素，当用户触发id属性值为ForthDiv的div元素的事件时，在捕获阶段系统将检测最外层的div元素，即id属性值为firstDiv的div元素是否注册了useCapture参数为 true 的事件处理函数，若注册了该事件处理函数就执行，然后再依次检测id属性值为SecondDiv和ThirdDiv的元素。在目标阶段系统会触发id属性为ForthDiv的元素的事件处理函数，不论在添加ForthDiv元素的事件处理函数时useCapture参数是true还是false。在冒泡阶段系统将依次检测id属性值为ThirdDiv、SecondDiv、FirstDiv的元素，如果其中某个元素注册了useCapture参数为false的事件处理函数，那么执行该处理函数。

addEventListener函数的语法格式代码如下所示：

object.addEventListener(type, listener, useCapture);

    下面以一个应用程序为例，介绍如何使用addEventListener函数为页面中标准的HTML控件注册事件处理函数。在这个应用程序运行时，单击应用中的按钮，会在界面中显示一段文本。

新建一个JavaScript的Windows应用商店的空白应用程序项目，将其命名为AddListener。在default.html页面中添加一个div元素和一个按钮，代码片段如下所示：

<body>

<div id="PromptMessageDiv"></div>

<button id="ShowMessageButton">点击这里</button>

</body>

接下来打开default.js文件，在处理应用激活事件的函数中添加代码，为"点击这里"按钮注册单击事件处理函数ShowMessageButton_Click。代码片段如下所示：

app.onactivated = function (args) {

if (args.detail.kind === activation.ActivationKind.launch) {

if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

} else {

}

args.setPromise(WinJS.UI.processAll());

var showMessageButton = document.getElementById("ShowMessageButton");

showMessageButton.addEventListener("click", ShowMessageButton_Click);

}

};

在上面的代码中，首先调用document对象的getElementById函数获得id属性值为ShowMessageButton的元素对象，并赋值给showMessageButton变量，接着通过showMessageButton变量调用元素对象的addEventListener函数为按钮注册单击事件处理函数ShowMessageButton_Click。

下面编写ShowMessageButton_Click函数的代码，实现当单击"点击这里"按钮时，在界面中显示一段文本。代码片段如下所示：

function ShowMessageButton_Click() {

var promptMessage = document.getElementById("PromptMessageDiv");

promptMessage.innerHTML = "您已经点击了按钮";

}

在上面的代码中，调用document对象的getElementById函数获得id属性值为PromptMessageDiv的元素对象，并赋值给promptMessage变量，接着设置promptMessage的innerHTML属性值为"您已经点击了按钮"。

启动调试，界面上显示"点击这里"按钮，单击这个按钮，界面中就会显示文本"您已经点击了按钮"。如图19-4所示：

图19-4运行效果图

对于WinJS库控件，为这类控件注册事件处理函数与标准HTML控件类似，只不过查找控件的函数稍有不同，例如查找一个id为"ShowMessageButton"的按钮，相应的JavaScript代码为：

document.getElementById("ShowMessageButton");

而查找一个id为"listViewID"的ListView控件，相应的JavaScript代码为：

document.getElementById("listViewID").winControl;

（4）为控件添加样式

为控件添加样式可以改变控件的外观，例如可以设置控件的大小、位置和控件中文本的字体颜色等。在为控件添加样式时，可以使用WinJS库样式，也可以使用自定义的样式。WinJS库样式是一组预定义的样式，使用WinJS库样式需要将控件的class属性设置为相应样式的名称。下面以一个简单的应用程序为例，介绍如何使用WinJS库中的样式和如何为控件自定义样式，在这个应用程序中包含两个按钮，一个按钮使用WinJS库中的win-backbutton样式，形状是一个向左的箭头，另一个按钮使用自定义样式，在样式定义中设置文本颜色为红色。

新建一个JavaScript的Windows应用商店的空白应用程序项目，将其命名为AddStyle。在default.html页面中添加两个按钮，分别设置这两个按钮的class属性，代码片段如下所示：

<body>

<button class="win-backbutton"></button>

<br />

<button class="buttonStyle">按钮 </button>

</body>

在上面的代码中，为两个按钮设置了class属性值，分别为win-backbutton和buttonStyle，其中win-backbutton是WinJS库中定义的样式，buttonStyle为自定义样式名称。

接下来打开default.css文件，在其中添加代码定义buttonStyle样式，将元素中文本的颜色改为红色。代码片段如下所示：

.buttonStyle {

color:red;

}

启动调试，界面上显示两个按钮，一个按钮形状是向左的箭头，另一个按钮的文本颜色为红色，如图19-5所示：

图19-5 运行效果图

Win10系列：JavaScript 控件的使用的更多相关文章

  1. Map工具系列-08-map控件查看器

    所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...

  2. Winform开发框架之客户关系管理系统(CRM)的开发总结系列4-Tab控件页面的动态加载

    在前面介绍的几篇关于CRM系统的开发随笔中,里面都整合了多个页面的功能,包括多文档界面,以及客户相关信息的页面展示,这个模块就是利用DevExpress控件的XtraTabPage控件的动态加载实现的 ...

  3. Swing系列之控件一

    Swing系列之控件 JTextArea JTextArea是一个实现多行文本的控件 构造函数 JTextArea() 构造新的TextArea. JTextArea(Document doc) 构造 ...

  4. Win10 UWP开发系列——开源控件库：UWPCommunityToolkit

    在开发应用的过程中,不可避免的会使用第三方类库.之前用过一个WinRTXamlToolkit.UWP,现在微软官方发布了一个新的开源控件库—— UWPCommunityToolkit 项目代码托管在G ...

  5. 【Win10】SplitView控件

    SplitView是Win10中的新控件. 用于呈现两部分视图. 一个视图是主要内容,另一个视图是用于导航.(也就是通常说的汉堡菜单.) 主要结构: <SplitView> <Spl ...

  6. win10 uwp 拖动控件

    我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法.其中第一个是最差的,最后的才是我希望大神你去用. Margin 移动 我们可以使用Margin移动,但这是w ...

  7. 【Win10】实现控件倒影效果

    先引入个小广告: 最近买了台小米盒子折腾下,发觉 UI 还是挺漂亮的,特别是主页那个倒影效果. (图随便找的,就是上面图片底部的那个倒影效果.) 好了,广告结束,回归正题,这个倒影效果我个人觉得是挺不 ...

  8. DevExpress学习系列（控件篇）：GridControl的基本应用

    一般属性设置 不显示分组框:Gridview->Option View->Show Group Panel=false 单元格不可编辑:gridcontrol -->gridview ...

  9. 【WIN10】基本控件

    先發個下載地址: http://yunpan.cn/cHuCqYzvsWFAL  访问密码 3470 說明一下.這個示例只是最簡單的演示,並不能提供太大的實用價值. 後面會介紹 Bing & ...

随机推荐

  1. Vim 8.0

    安装Vim 8.0yum install ncurses-devel wget https://github.com/vim/vim/archive/master.zip unzip master.z ...

  2. Python中数据类型

    一.整数 Python可以处理任意大小的整数,当然包括负整数,在Python程序中,整数的表示方法和数学上的写法一模一样,例如:1,100,-8080,0,等等. 计算机由于使用二进制,所以,有时候用 ...

  3. vue 里面引入高德地图

    效果图: 实现: 一:引入 高德,web-sdk (两种方式) 1:在html 中引入(我用的这一种) <script type="text/javascript" src= ...

  4. Python全栈开发-Day12-Mysql数据库和ORM

    本节内容 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令 创建数据库 外键 增删改查表 权限 事务 索引 python 操作mysql ORM sql ...

  5. RabbitMQ消息发布时的权衡

    在进行本篇文章的学习之前,你需要先阅读 https://www.cnblogs.com/duanjt/p/10057330.html.以便对Java访问RabbitMQ的基础用法有所了解. 一.失败通 ...

  6. 非常好的一个CentOS 6.2 apache 2.4.2 编译教程

    除了以下2点,没有错的. 1)pcre-devel 需要安装 2)apr 和 apr-util 有了新的版本了 How to Install Apache 2.4.2 from Source on C ...

  7. Spring Boot入门第三天：配置日志系统和Druid数据库连接池。

    原文链接 一.日志管理 1.在application.properties文件中加入如下内容: logging.level.root=WARN logging.level.org.springfram ...

  8. The MySQL Server

    mysqld is the MySQL server. configuring the server. The mysql server, mysqld,has many command option ...

  9. 20181011xlVba提取邮箱手机号码

    Sub TransferData() AppSettings Dim StartTime As Variant Dim UsedTime As Variant StartTime = VBA.Time ...

  10. ASP.Net MVC多语言

    .NET MVC 多语言网站 通过浏览器语言首选项改变MVC的语言,通过浏览器语言选项,修改脚本语言. 一.添加资源文件 1.添加App_GlobalResources文件夹. 2.添加默认的资源文件 ...