向页面中添加的控件可分为两种类型：标准的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. hbase简单操作

    hbase有hbase shell以及hbase 客户端api两种方式进行hbase数据库操作: 首先,hbase shell是在linux命令行进行操作,输入hbase shell命令,进入shel ...

  2. 剖析Hadoop和Spark的Shuffle过程差异

    一.前言 对于基于MapReduce编程范式的分布式计算来说,本质上而言,就是在计算数据的交.并.差.聚合.排序等过程.而分布式计算分而治之的思想,让每个节点只计算部分数据,也就是只处理一个分片,那么 ...

  3. CC2 条理分明-----独立思考

    独立思考 前几天啊,在吃饭的时候,听到同事们在讨论某幼儿园事件,因为没有人愿意出来作证,所以很可能是造谣.前几天他们还咬牙切齿的指责这个幼儿园,现在怎么就变了.我发现人们的思维变化的太快,我自己也是的 ...

  4. SQL左右连接中的on and和on where的区别

    SQL左右连接中的on and和on where的区别 左联时,ON后面的对左边表的条件对左边表数据无影响(因为左连接符合左边所有条件),但对右边表数据有影响,只有符合左边表条件时,右边表数据才会查出 ...

  5. 雷林鹏分享：jQuery EasyUI 数据网格 - 创建子网格

    jQuery EasyUI 数据网格 - 创建子网格 使用数据网格(datagrid)的详细视图,用户可以展开一行来显示附加的详细信息. 任何内容都可以加载作为行详细,子网格也可以动态加载. 本教程将 ...

  6. 方差variance, 协方差covariance, 协方差矩阵covariance matrix | scatter matrix | weighted covariance | Eigenvalues and eigenvectors

    covariance, co本能的想到双变量,用于描述两个变量之间的关系. correlation,相关性,covariance标准化后就是correlation. covariance的定义: 期望 ...

  7. spring ----> 搭建spring+springmvc+mybatis出现的几个问题

    环境: idea ce 2018.1+maven3.5.3+mysql8.0.11+jdk1.8 spring4.3.7+spring mvc4.3.7+mybatis3.4.1+tomcat7.0. ...

  8. Jenkins与Gitlab集成

    一.安装jenkinshttps://mirrors.tuna.tsinghua.edu.cn/jenkins/redhat/     #清华yum源 yum -y install java-1.8. ...

  9. python3-知识扩展扫盲易忘-generator的用法

    前部分转自: https://www.cnblogs.com/Tsukasa/p/6613934.html 通过列表list生成器,我们可以直接创建一个列表 ? 1 2 3 >>> ...

  10. canvas学习之折线图

    接着上一张柱状图讲,我们是使用折线图: import {canvasPoint} from '../../assets/js/canvas';import {basicInfo,histogramMo ...