向页面中添加的控件可分为两种类型：标准的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. 微信小程序不可操作dom节点

    //根据历史记录快速搜索 fastSearch:function(e){ console.log(e.currentTarget.id) wx.navigateTo({ url: '../search ...

  2. Ubuntu vim终端常用的快捷键

    Ubuntu中常用的快捷键 Ubuntu中的许多操作在终端(Terminal)中十分的快捷,记住一些快捷键的操作更得心应手.在Ubuntu中打开终端的快捷键是Ctrl+Alt+T.其他的一些常用的快捷 ...

  3. Python 编程快速上手 第十四章 处理 CSV 文件和 JSON 数据

    前言 这一章分为两个部分,处理 CSV 格式的数据和处理 JSON 格式个数据. 处理 CSV 理解 csv csv 的每一行代表了电子表格中的每一行,每个逗号分开两个单元格csv 的内容全部为文本, ...

  4. Javascript 第五章总结：A trip to Objectville

    前言 在以前的代码中,我们使用 primitive 类型的变量和 procedural manner 来执行脚本.但是,更好的办法是 object-oriented (面向对象)的.作者说:它能让我们 ...

  5. JSON和Serialize数据格式的对比

    1.相同点: 都是把其它数据类型转换为可传输的字符串 都是结构性数据 2.不同点: JSON比Serialize序列后的格式要简洁 Serialize序列化的数据格式保存数据原有类型 3.扩展 JSO ...

  6. Spring Cloud之注册中心搭建

    一.注册中心服务端搭建 1)引入相关Maven坐标 <dependency> <groupId>org.springframework.cloud</groupId> ...

  7. BAT 大规模Hadoop集群实践

    百度高级架构师马如悦:我的Hadoop 2.0 http://www.csdn.net/article/2011-04-28/296869 腾讯大规模Hadoop集群实践 腾讯 hadoop 基线版本 ...

  8. android ------ Emulator: error: x86 emulation currently requires hardware acceleration

    我创建 Android 模拟器,运行项目时出现了一个这样的错误: 如下: emulator ERROR:x86 emulation currently requires hardware accele ...

  9. Confluence 6 空间标识

    每一个 Confluence 空间都有一个 空间标识(space key),这个空间标识是简短并且是唯一的,这个标识被用来构建到空间的 URL 中. 当你创建一个站点空间,Confluence 将会为 ...

  10. Pytorch半精度浮点型网络训练问题

    用Pytorch1.0进行半精度浮点型网络训练需要注意下问题: 1.网络要在GPU上跑,模型和输入样本数据都要cuda().half() 2.模型参数转换为half型,不必索引到每层,直接model. ...