向我们的应用中添加JavaScript 的 Windows 库控件,首先我们接着上一个demo把一个评分控件添加进来

  与 HTML 控件不同的是,适用于 JavaScript 的 Windows 库控件没有专用的标记元素:例如,你无法通过添加<rating /> 元素来创建 Rating 控件。若要添加适用于 JavaScript 的 Windows 库控件,可以创建 div 元素并使用 data-win-control 属性指定所需的控件类型。若要添加 Rating 控件,请将该属性设置为 "WinJS.UI.Rating"。

  

上面代码就是我们的上一个demo中的,不熟悉的可以看看上一个例子

  运行结果:

  

  当我们操作评分控件时不会有任何反应,接下来我们给它注册事件

  打开default.js文件,添加如下代码段,rating控件有个change事件我们就注册这个事件

1 function ratingChanged(evenInfo)
2 {
3 var ratingOutPut = document.getElementById("ratingOutPut");
4 ratingOutPut.innerText = "您对回答做出了 "+evenInfo.detail.tentativeRating+"分 的评价";
5 }

  怎么调用这个方法呢?

 1 app.onactivated = function (args) {
2 if (args.detail.kind === activation.ActivationKind.launch) {
3 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
4 // TODO: 此应用程序刚刚启动。在此处初始化
5 //您的应用程序。
6 } else {
7 // TODO: 此应用程序已从挂起状态重新激活。
8 // 在此处恢复应用程序状态。
9 }
         //就是在此处注册rating控件的change事件了
10 args.setPromise(WinJS.UI.processAll().then(function completed() {
11 var ratingControlDiv = document.getElementById("ratingControlDiv");
12 var ratingControl = ratingControlDiv.winControl;
13 ratingControl.addEventListener("change", ratingChanged, false);
14 }));
15
16 var helloButton = document.getElementById("btnHello");
17 helloButton.className = "buttonstyle";
18 helloButton.addEventListener("click", buttonClickHandler, false);
19 }
20 };

  运行结果如下:

  

  这就是用html+JavaScript写的第一个win8应用,参考了微软提供的实例

  本文来自小慧only的博客,原文地址:http://www.cnblogs.com/zhaohuionly/archive/2012/11/26/2788609.html

使用JavaScript+Html创建win8应用(二)的更多相关文章

  1. 使用JavaScript+Html创建win8应用(一)

            最近在学习win8 metro app的开发,今天刚刚学了一个小的例子,分享一下 开始之前你需要准备... 1.开发win8应用需要具备Windows 8 和 Microsoft Vi ...

  2. javascript基础学习(十二)

    javascript之BOM 学习要点: 屏幕对象 History对象 Location对象 一.屏幕对象 Screen对象是一个由javascript自动创建的对象,该对象的主要作用是描述客户端的显 ...

  3. 转:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述

    原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...

  4. JavaScript中创建类,赋值给ajax中的data参数

    缘由:因为要给根据是否选中checkbox来动态增加ajax中data的属性(ajax的data属性格式的几种方法,参考http://www.jb51.net/article/46676.htm) d ...

  5. JavaScript中创建字典对象(dictionary)实例

    这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下 对于JavaScript来说,其自身的Array对象 ...

  6. Eclipse+Maven创建webapp项目<二> (转)

    Eclipse+Maven创建webapp项目<二> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...

  7. 简单使用JSON,JavaScript中创建 JSON 对象(一)

    JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. ...

  8. 微信创建带参数二维码并加上logo

    1.因为带参数二维码有两种,分别是字符参数,数值参数,因此,在写创建方法的时候,需要进行判断 public void ShowQcCode(N_WX_QrCode code) { QRCodeCrea ...

  9. JavaScript 系列博客(二)

    JavaScript 系列博客(二) 前言 本篇博客介绍 js 中的运算符.条件语句.循环语句以及数组. 运算符 算术运算符 // + | - | * | / | % | ++ | -- consol ...

随机推荐

  1. 022 ARM寄存器详解

    R13:堆栈指针寄存器 SP R14:链接寄存器 LR R15:程序计数器 PC指针 CPSR:当前程序状态寄存器 SPSR:备份程序状态寄存器

  2. Python之路【第二篇】:Python基础(一)

    一.作用域 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. 1 2 3 if 1==1:     name = 'wupeiqi' print  name 下面的结论对吗? ...

  3. placeholder插件及placeholder默认颜色修改

    $.fn.placeHolder = function(){ $(this).each(function(i, el) { var self = $(el); if ($.browser.msie & ...

  4. 视频特效制作:如何给视频添加边框、水印、动画以及3D效果

    2014-12-08 09:47 编辑: suiling 分类:iOS开发 来源:叶孤城的blog 招聘信息: iOS手机软件开发工程师 iOS工程师 Web后端高级开发工程师 iOS软件工程师 ja ...

  5. C#虚方法和覆写方法

  6. SQL SERVER中查询参数为空(null)时默认查询所有的实现

    最近在项目中碰到一个比较有意思的问题,网上查找了一些方法,在这里总结分享一下. 我们经常会碰到这样的场景:需要查询数据,有一些查询条件,但是查询的时候,我们希望在某个条件为空的时候,则不筛选这个条件, ...

  7. yii2解析非x-www-form-urlencoded类型的请求数据(json,xml)

    组件配置添加: 'request' => [ 'parsers' => [ 'application/json' => 'yii\web\JsonParser', 'applicat ...

  8. 有关c#装箱和拆箱知识整理

    c#装箱和拆箱知识,装箱和拆箱是一个抽象的概念. 1.装箱和拆箱是一个抽象的概念  2.装箱是将值类型转换为引用类型 : 拆箱是将引用类型转换为值类型 利用装箱和拆箱功能,可通过允许值类型的任何值与O ...

  9. (转)Android L Ripple的使用

    声明:Demo并不是有本人所写,本人只是总结在这里 工程源码: RippleDemo.zip ---------------------------------------------------- ...

  10. 通过URLHttpConnection方式连接网络步骤,获取位图为例

    要注意的是:访问网络不能直接放在主线程,要放在另外一个线程里面,如果放在主线程会报android.os.NetworkOnMainThreadException错误1 public Bitmap ge ...