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

    ZC:iconv.dll.libxml2.dll.zlib1.dll 放到 exe所在目录下 1.代码来源于 帖子:XML_CPP_资料_libXml2_01_Code_ZC(?.pro) 2.代码: ...

  2. JDK中关于BIO，NIO，AIO，同步，异步介绍

    在理解什么是BIO,NIO,AIO之前,我们首先需要了解什么是同步,异步,阻塞,非阻塞.假如我们现在要去银行取钱: 同步 : 自己亲自出马持银行卡到银行取钱(使用同步IO时,Java自己处理IO读写) ...

  3. Node.js 常用命令

    1. 查看node版本 node --version 2. 查看npm 版本,检查npm 是否正确安装. npm -v 3. 安装cnpm (国内淘宝镜像源),主要用于某些包或命令程序下载不下来的情况 ...

  4. centos 7 安装TensorFlow

    查看linux版本 uname -a 查看磁盘大小 准备好python 2.7 查看python版本  import sysprint sys.version print sys.version_in ...

  5. python+opencv 运行环境搭建

    1:安装pycharm,验证码你懂的 2:安装python3.5以上,或3.6,python2和3 的版本差异还蛮大 3:安装opencv,如下图 以上是方法一,还有之中方法是下载whl文件再手动安装 ...

  6. 2. 搭建DRF项目

    企业项目开发流程 一.需求分析 1.企业的web项目类型: 商城 门户网站[企业站和门户站] 社交网络 资讯论坛 内部系统 个人博客 内容收费站 前端的静态页面制作,外界开发的时候,是照着psd/pn ...

  7. CentOS6.8单用户模式下修改密码

    CentOS6.8单用户模式下修改密码 1. 选择进入菜单menu界面,在开启系统出现如下界面时,按Esc键(只需按一下) 2. 然后进入到如下界面 3. 上图中红色矩形类的内容,按“a”键可以修改内 ...

  8. Bacterial Melee CodeForces - 756D (dp去重)

    大意: 给定字符串, 每次可以任选一个字符$x$, 将$x$左侧或右侧也改为$x$, 求最终能得到多少种字符串. 首先可以观察到最终字符串将连续相同字符合并后一定是原字符串的子序列 并且可以观察到相同 ...

  9. React文档（一）安装

    React是一个灵活的可以用于各种不同项目的框架,你可以用它来写新应用,你也可以逐步将它引进已有的代码库而不用重写整个项目. 试用React 如果你想玩一玩React,那么就去CodePen上试一试. ...

  10. WDA基础二：界面，元素介绍

    1.ELEMENTS: BUTTON  按钮 CAPTION  标题 DROPDOWN_BY_IDX   带序号的下拉 DROPDOWN_BY_KEY   带键值的下拉 FILE_UPLOAD    ...