一起学 WinJS-第一个程序

作者:vkvi 来源:ITPOW(原创) 日期:2017-3-23

前一节已经介绍了创建一个默认的 WinJS 程序,现在,我们想创建一个投票控件,样式如下图:

winjs-rating

福利来了,WinJS 提供了控件,我们根本不用编程就可以实现,在 index.html 中添加如下代码即可:

它表示这个 div 用的就是 WinJS 中的 Rating 控件。

如果我们要配置这个 Rating,就用 data-win-options。

如上就是总共 5 颗星星,当前得分 3 颗星星(支持小数,比如 3.5)。data-win-options 是配置,是 JSON 格式字符串,理论上来说 data-win-options='{ "maxRating": 2 }',这样将属性用引号引起来更正确,但是我发现不加引号,在 UWP 中也没问题。

程序控制

querySelector 不用说;winControl 表示是 WinJS.UI 控件,不是我们的 div;averageRating 是这个控件的属性。这段代码是放在哪里呢?放在 js/main.js 合适的地方皆可,比如我是放在这里的:

程序响应/事件

比如客户改变了评分,后台得知道才行。

HTML 代码如下:

将如下 JS 代码放在 main.js 最前面或最后面:

注意:直接将代码放在脚本文件最“根”处,是一种不推荐的方式,我们会在后面章节介绍推荐的方式。

动态创建控件

现在我们要用程序将 <div id="myRating"></div> 变成一个 Rating 控件(甚至这个 div 也可以用 document.createElement 动态创建)。

第二个参数是 JSON 格式,其属性不加引号也不出错。

本文介绍了一个 Rating 控件,关于 WinJS 的更多控件,以及它们的属性、方法,请参见微软官方网页:https://msdn.microsoft.com/zh-cn/library/windows/apps/br229782.aspx

相关文章