使用JavaScript+Html创建win8应用(二)

向我们的应用中添加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

时间: 2024-10-04 03:22:49

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

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

        最近在学习win8 metro app的开发,今天刚刚学了一个小的例子,分享一下 开始之前你需要准备... 1.开发win8应用需要具备Windows 8 和 Microsoft Visual Studio Express 2012 for Windows 8 下载 Windows 8 2.安装window8之后,转至 开发者的下载内容 ,查找下载工具和 SDK 标题,然后单击“立即下载”按钮 3.你需要开发者许可证才能开始创建 Windows 应用商店应用. 获取开发者许可证.

JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示

一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include进来.这样,当要对导航栏进行修改时,只需要修改一个文件,而不用修改所有相关的页面文件.不过,我这里没有这样做,没有抽取出来. 二.实现当前页面的标识+不同页面的head头部背景图片的改变 现在在(一)实现的基础之上,来实现导航栏当前所选页面的菜单项高亮显示,让访问者一路了然知道"我正在这里"

javascript基础学习(十二)

javascript之BOM 学习要点: 屏幕对象 History对象 Location对象 一.屏幕对象 Screen对象是一个由javascript自动创建的对象,该对象的主要作用是描述客户端的显示器的信息. 目前显示器分辨率为800X600或1024X768两种. screen.height:屏幕的高度 screen.width:屏幕的宽度 screen.availHeigh:屏幕的有效高度 screen.availWidth:屏幕的有效宽度 二.History对象 History对象可以

javascript面向对象学习笔记(二)——创建对象

javascript面向对象学习笔记(二)--创建对象 工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var person1=createPerson("Chiaki&

JavaScript 动态创建标记与Ajax

JavaScript 动态创建标记与Ajax 一:简介 前面都是针对已经存在的标记进行操作.JavaScript同样可以动态创建标记并且与现有标记组合生成新的Document.同时简单的介绍了Ajax. 二:动态创建标记与组合 相关方法: /** * Some old-shcool method */ document.write("str"); var node = document.getElementById('id'); var htmlValue = node.innerHT

js基础--javascript基础概念之语句(二)

js基础--javascript基础概念之语句(二)label,break,continue.. break .  continue 语句. break  continue 语句用于在循环中精确控制代码的执行,其中break语句会立即退出循环,执行循环后面的语句. continue 则退出循环后返回到再次进入循环中. 如: var num = 0; for(var i = 0; i<=100; i++){ if(i >= 10){ break; } num = i; } alert(num);

使用Javascript D3创建属于你的涂鸦作品

Matplotlib可以用来创建很漂亮精确的数学图形: 但是有时候在进行想法交流的时候,不想那么严谨正式,想使用那种轻松的.涂鸦风格的图形: MATLAB XKCDify项目可以用来生成上述的涂鸦作品: https://github.com/slayton/matlab-xkcdify 不过本文将介绍使用Javascript D3库来在线生成你自己的涂鸦作品,这个比安装Matlab要方便得多, 网页界面如下所示,填写你想表达的方程式,涂鸦标题,X/Y轴参数和标签,你还可以通过jQuery UI

利用JavaScript如何创建一个table表格[第2种方法]

创建一个五行五列的表格(使用循环) <style> td{border:1px solid #ccc;} </style> <script> window.onload=function(){ var oTable=document.createElement("table"); var row; var cell; for(var i=0;i<5;i++){ row=document.createElement("tr")

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

这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下 对于JavaScript来说,其自身的Array对象仅仅是个数组,无法提供通过关键字来获取保存的数据,jQuery源码中提供了一种非常好的方式来解决这个问题,先看一下源码: 复制代码代码如下: function createCache() { var keys = []; function cache(key, value) {  // Use (k