iT邦幫忙

DAY 11
8

用 HTML5 和 JavaScript 學習開發 Windows 8 Apps系列 第 14

Day11 實作 WinJS.UI.Rating

  • 分享至 

  • xImage
  •  

Rating其實是蠻單純的元件,但是呢,感覺重點會放在 JavaScript,不過今天不會講到 JavaScript 。醉

Rating 這個元件(或者應該說Object),主要是要實現類似評分機制的功能,使用者可以透過按下rating,進行 rating 的動作。

WinJS.UI.Rating提供了三種形式的 rating:

  1. average rating
  2. tentative rating
  3. user's rating

使用的時候,跟之前一樣,你必須給 rating 一個 html tag (例如:Div),然後為該 tag 加上 win-data-controls,這種是最基本款的 rating :

<div data-win-control="WinJS.UI.Rating"></div>

我做了一個簡單的範例:

<p>Today is Rating!!</p>
<h3>Type1 : How do you feel about Windows 8?</h3>
<div id="type1" data-win-control="WinJS.UI.Rating"></div>

    
 <h3>Type 2 : How about this food?</h3>
 <div id="ratingControl" data-win-control="WinJS.UI.Rating"
    data-win-options="{averageRating : 3.4, maxRating : 7}">
</div>

averageRating 這個屬性,是指定這個要被rating項目的平均分級,這個平均分級要多少由開發人員決定。
如果有設定這個屬性,預設星星會停在averageRating的值的那顆星星,一直到user有選擇rating時。

maxRating 是設定星星的最大值,預設為5顆,官方的範例將最大值調整為7顆。

另外,官方文件http://msdn.microsoft.com/en-us/library/windows/apps/br211895.aspx也有寫到一些你可以客制的css部分,像我弄起來就很慘,好醜XDD
但主要是為了辨識哪個css對應到哪些地方:

另外,當user設定rating時,會觸發change事件,用來取得user設定的值。
這個部分,我還沒有實作過,若有會再補上。:)


上一篇
Day10 實作 WinJS.UI.ListView
下一篇
Day12 番外篇,想寫[F2E Star]企劃書...但沒寫完...
系列文
用 HTML5 和 JavaScript 學習開發 Windows 8 Apps30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
SunAllen
iT邦研究生 1 級 ‧ 2013-09-26 00:41:29

沙發大大有沒有考慮,明年寫PHP...教學之類的~

yiying iT邦新手 1 級 ‧ 2013-09-26 09:09:23 檢舉

哦~怎麼獨挑php?
呵呵 或許明天真的會寫php :P

yiying iT邦新手 1 級 ‧ 2013-09-26 10:17:49 檢舉

寫錯了 是“明年” Orz

我要留言

立即登入留言