現在做網頁已經不僅限于實作功能了，更多的是要實作功能的同時追求更加美觀的實作。比如頁面上讓使用者評分的功能，你完全可以放5個RdioButton讓使用者選擇分數，也可以用DropDownList來實作，但那樣不如用五個星星來得炫來得直覺。
像這樣的星星評分插件用得非常普遍，幾乎要成為你随手撚來的小菜，任何一個不具備使用這樣插件的前端程式員都是毫無戰鬥力的。
下面我們來實際操作，運用一下這個有愛的小插件。
需要做的事情非常簡單，在頁面上放一個DIV，id取名為‘star’或者什麼的随你是以愛，用來顯示我們的評分插件。
當然，記得把下載下傳下來的jquery.raty.js或者jquery.raty.min.js放在項目檔案夾當中。同時，由于是基于jQuery的，是以包含jQuery的腳本檔案那是必需的。這三個腳本檔案都可以在下載下傳後的壓縮包内的js檔案夾内找到。直接複制到你的項目相應目錄中即可。
然後，在頁面中用<Script>标簽将剛才的腳本引進頁面當中。
現在，隻需一句代碼就可以實作評分了。在頁面添加如下語句：
運作我們的網站程式來看一下效果。
沒出現星星不說，排版還一團亂。但看到這個情形，我們應該知道是缺少相應的圖檔或者CSS樣式表。将壓縮包内的img檔案夾複制到項目中，就應該能解決圖檔缺失的問題了。
需要注意的就是圖檔路徑問題，預設它會在根目錄打img檔案夾中的圖檔，如果你需要将圖檔放到其他地方，需要在代碼中指定，這在後面介紹。
重新整理頁面看效果：
圖檔是出來了，排版還是亂的，而且有HTML符号&#160沒有被正确解析。這個符号代表空格，對應着&nbsp，這裡應該是腳本裡面的問題。是以這裡提出一個使用這個插件需要注意的地方：jQuery要求1.5及以上版本。如果你一開始用的不是1.4的版本，恭喜你你不會出現這裡的問題。
現在将jQuery換掉：
同時修改頁面當中的引用。
現在重新整理頁面檢視效果，一切正常了。
上面介紹的是基本的使用，這個插件最讓人喜愛的地方在于他提供了非常多的API供我們自定義，實作一些我們想要的功能和效果。
通過定義path屬性可以指定我們要使用的圖示的位置。現在我們将項目中的img檔案夾移到其他地方，比如這裡我把它移到Styles檔案夾下：
然後重新整理頁面，同樣會出現找不圖檔的錯誤，這時候，在腳本裡面設定一下path屬性：
再去重新整理頁面效果又出來了，并且我們可以通過檢視頁面的源碼發現，圖檔的調用确實是我們指定的地方：
我們可以使用自定義的圖示，也可以使用其他自帶的圖示，壓縮包内可以找到更大的星星圖示，以及勳章笑臉圖示等。
現在将doc檔案夾img檔案夾内的是以有圖示複制到我們項目中的img檔案夾中來。更改圖示通過插件的starOff和starOn屬性。
下面将圖示換成大的：
隻需寫上相應圖示的檔案名即可，如果要使用勳章則應該是medal-on.png和medal-off.png，現在重新整理頁面看效果，有點不理想：
星星沒有排成一排了，擠了兩個下去。是不是很奇怪。檢視一下頁面代碼，發現包含我們raty插件的那個DIV被加了個width：100px樣式。
可我們并沒有給DIV設定任何樣式啊，這隻能是插件的腳本自己設定的。因為在小星星時，100的寬度剛好，現在換在大星星了一排的位置不夠了是以被擠了兩個下去。這裡需要通過size屬性來設定一下寬度進而将五個大星星重新顯示到一排來：
指針放到星星上預設顯示‘bad’‘poor’‘reuglar’…可以自定義要顯示的文本，通過hint屬性。
現在換成1，2，3…
最為重要的環節就是擷取使用者所選擇的值。插件提供了不止一種的方式可以讓你得到使用者的選擇值，這裡介紹兩種方式。
通過click事件來擷取。Click裡面定義一個函數來處理擷取的值，這個選擇值通過’score’參數傳遞。
這裡通過彈窗顯示出使用者選擇的值：
第二種方式可以設定一個隐蔽的HTML元素來儲存使用者的選擇值，然後可以在腳本裡面通過jQuery選中這個元素來處理該值。
現在在我們的star DIV下面再放一個DIV，用來儲存使用者的選擇：
然後在腳本代碼裡将這個DIV設定為target，需要注意的是，還要将targetKeep 屬性設定為true，使用者的選擇值才會被保持在目标DIV中，否則隻是滑鼠懸停時有值，而滑鼠離開後這個值就會消失。
現在，使用者的選擇會在下面的DIV中被顯示出來。
但其實我們隻是想拿它來暫時存放這個值，并沒想讓它顯示出來，是以可以讓這個DIV一直隐藏，我們通過這個DIV來擷取值并進行我們需要的各種處理，比如送回伺服器儲存到資料庫等。這裡同樣使用彈窗顯示這個值來做例子。跟上面唯一不同就是擷取該值的方式不同。
這個插件還有很多有趣的功能，大家可以自己去探尋，它強大到真的能滿足你在項目中的各種需求。
相關連接配接：
jQuery Raty - A Star Rating Plugin
<a href="http://wbotelhos.com/raty">http://wbotelhos.com/raty</a>