iT邦幫忙

DAY 2
2

jQuery外掛特輯系列 第 2

[jQuery]外掛特輯02:Star Rating Widget-星星評價創造豐富的使用者體驗

更詳細的說明請參考我的部落格

互動式的Star Rating可以帶給使用者更好的操作體驗,讓網站更加活潑,雖然沒有他網站還是可以照樣運作,但是無疑的這會令網站失色不少。恰巧就在昨天,我在做 Rating的功能,既然要Rating就不可避免的想到要用Star Rating的使用者介面來做評分,上網Google了一下,想找一個比較好用的jQuery外掛與Ajax結合,來進行Rating的作業,很快的就找到了一些看似不錯的jQuery外掛。像是:
(1)jQuery Star Rating Plugin:目前出到v3.12版
(2)jQuery Ajax Rater Plugin:只要指定max rate和current rate,就可以簡單的用javascript動態建立
(3)Star Rating widget
(4)jQuery Rater Star Plugin:這是一個大陸同胞做的,感覺也相當不錯。

但是最後我還是決定使用Star Rating widget,為什麼呢?實際上,我一開始是使用(1)jQuery Star Rating Plugin。但是(1)有個很嚴重的問題,會造成程式迴圈,耗費大量的CPU運算。

就是當我用Ajax的方式傳回一個平均評價以後,我會呼叫select方法設定星星的顯示(也就是說平均評價為3,就要顯示3顆星星),但是當select方法呼叫後,callback event就會再次被呼叫(在這幾個Rating外掛,callback event就相當於click event),當click執行後,又會再次呼叫ajax,ajax傳回平均評價後又呼叫select方法,接著就......一值重複Orz,瀏覽器就開始當機,筆電的散熱風扇開始快速運轉。

在我花費1個多小時的時間試圖解掉這個問題卻沒有成功,我決定重新尋找一個更好用的Rating外掛,所以我找到了(3)Star Rating widget。

外掛名稱:Star Rating widget
作者網站:http://orkans-tmp.22web.net/star_rating/
檔案下載:http://finalevildemo.appspot.com/js/ui.stars.js
Demo:http://jquery.finalevil.com/rating.html
注意:要使用這個外掛必須先加入jQuery UI的UI Core檔案。

以下簡單說明如何使用這個外掛:
更詳細的說明請參考我的部落格


上一篇
[jQuery]外掛特輯01:Lazy Load-延遲載入網頁圖片
下一篇
[jQuery]外掛特輯03:FontEffect-文字特效大師
系列文
jQuery外掛特輯18
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言