一起学 WinJS-第一个程序

作者:vkvi 来源:千一网络(原创) 日期: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

你前面那位网友看了:CSS 规则中两个类连在一起是什么意思?

▲▲▲嘿,欢迎转载传播本站原创文章,尽量保留来源噢。▲▲▲

文章评论
  • 1 楼:评论
    好像很少關於WinJS方面的書,而且以前出的書跟現在又不完全相容,覺得作者可以出一本書造福大眾了。
标题:必填
内容:
本站永远终止与捏造“罪名”不支付广告费的某度联盟合作。
vkvi
vkvi

作者简介: vkvi,致力于 .NET Web 开发、移动开发的技术推广,在 .NET、SQL Server、Windows Server 等方面有深入研究和丰富经验,10 年间共计撰写文章 4000 余篇。 主持金融、国土、农业、电商等多个行业项目执行, 推行“技术提升生产力、人心决定成功率”的管理理论。 联系他