現在做網頁已經不僅限於實現功能了，更多的是要實現功能的同時追求更加美觀的實現。比如頁面上讓用戶評分的功能，你完全可以放5個RdioButton讓用戶選擇分數，也可以用DropDownList來實現，但那樣不如用五個星星來得炫來得直觀。
像這樣的星星評分插件用得非常普遍，幾乎要成為你隨手捻來的小菜，任何一個不具備使用這樣插件的前端程序員都是毫無戰斗力的。
這里給大家介紹一個實現這樣的評分效果的小插件jQuery Raty。它提供的API相當豐富真的是讓人愛不釋手。詳細文檔及下載插件請移步這里。
基本使用
下面我們來實際操作，運用一下這個有愛的小插件。
需要做的事情非常簡單，在頁面上放一個DIV，id取名為‘star’或者什么的隨你所以愛，用來顯示我們的評分插件。
1 <div id="star"></div>
當然，記得把下載下來的jquery.raty.js或者jquery.raty.min.js放在項目文件夾當中。同時，由於是基於jQuery的，所以包含jQuery的腳本文件那是必需的。這三個腳本文件都可以在下載后的壓縮包內的js文件夾內找到。直接復制到你的項目相應目錄中即可。
然后，在頁面中用<Script>標簽將剛才的腳本引進頁面當中。
1 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 2 3 <script src="Scripts/jquery.raty.js" type="text/javascript"></script>
現在，只需一句代碼就可以實現評分了。在頁面添加如下語句：
1 <script type="text/javascript"> 2 3 $('#star').raty(); 4 5 </script>
運行我們的網站程序來看一下效果。
沒出現星星不說，排版還一團亂。但看到這個情形，我們應該知道是缺少相應的圖片或者CSS樣式表。將壓縮包內的img文件夾復制到項目中，就應該能解決圖片缺失的問題了。
需要注意的就是圖片路徑問題，默認它會在根目錄打img文件夾中的圖片，如果你需要將圖片放到其他地方，需要在代碼中指定，這在后面介紹。
刷新頁面看效果：
圖片是出來了，排版還是亂的，而且有HTML符號 沒有被正確解析。這個符號代表空格，對應着 ，這里應該是腳本里面的問題。所以這里提出一個使用這個插件需要注意的地方：jQuery要求1.5及以上版本。如果你一開始用的不是1.4的版本，恭喜你你不會出現這里的問題。
現在將jQuery換掉：
同時修改頁面當中的引用。
1 <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
現在刷新頁面查看效果，一切正常了。
指定圖標
上面介紹的是基本的使用，這個插件最讓人喜愛的地方在於他提供了非常多的API供我們自定義，實現一些我們想要的功能和效果。
通過定義path屬性可以指定我們要使用的圖標的位置。現在我們將項目中的img文件夾移到其他地方，比如這里我把它移到Styles文件夾下：
然后刷新頁面，同樣會出現找不圖片的錯誤，這時候，在腳本里面設置一下path屬性：
1 <script type="text/javascript"> 2 3 $('#star').raty({ 4 5 path:"Styles/img" 6 7 }); 8 9 </script>
再去刷新頁面效果又出來了，並且我們可以通過查看頁面的源碼發現，圖片的調用確實是我們指定的地方：
我們可以使用自定義的圖標，也可以使用其他自帶的圖標，壓縮包內可以找到更大的星星圖標，以及勛章笑臉圖標等。
現在將doc文件夾img文件夾內的所以有圖標復制到我們項目中的img文件夾中來。更改圖標通過插件的starOff和starOn屬性。
下面將圖標換成大的：
1 <script type="text/javascript"> 2 3 $('#star').raty({ 4 5 path:"Styles/img", 6 7 starOff: 'star-off-big.png', 8 9 starOn: 'star-on-big.png' 10 11 }); 12 13 </script>
只需寫上相應圖標的文件名即可，如果要使用勛章則應該是medal-on.png和medal-off.png，現在刷新頁面看效果，有點不理想：
星星沒有排成一排了，擠了兩個下去。是不是很奇怪。查看一下頁面代碼，發現包含我們raty插件的那個DIV被加了個width：100px樣式。
可我們並沒有給DIV設置任何樣式啊，這只能是插件的腳本自己設置的。因為在小星星時，100的寬度剛好，現在換在大星星了一排的位置不夠了所以被擠了兩個下去。這里需要通過size屬性來設置一下寬度從而將五個大星星重新顯示到一排來：
1 <script type="text/javascript"> 2 3 $('#star').raty({ 4 5 path:"Styles/img", 6 7 starOff: 'star-off-big.png', 8 9 starOn: 'star-on-big.png', 10 11 size:24 12 13 }); 14 15 </script>
設置顯示文本
指針放到星星上默認顯示‘bad’‘poor’‘reuglar’…可以自定義要顯示的文本，通過hint屬性。
現在換成1，2，3…
1 <script type="text/javascript"> 2 3 $('#star').raty({ 4 5 hints: ['1', '2', '3', '4', '5'], 6 7 path:"Styles/img", 8 9 starOff: 'star-off-big.png', 10 11 starOn: 'star-on-big.png', 12 13 size:24 14 15 }); 16 17 </script>
獲取用戶選擇的值
最為重要的環節就是獲取用戶所選擇的值。插件提供了不止一種的方式可以讓你得到用戶的選擇值，這里介紹兩種方式。
通過click事件來獲取。Click里面定義一個函數來處理獲取的值，這個選擇值通過’score’參數傳遞。
這里通過彈窗顯示出用戶選擇的值：
1 <script type="text/javascript"> 2 3 $('#star').raty({ 4 5 hints: ['1', '2', '3', '4', '5'], 6 7 path:"Styles/img", 8 9 starOff: 'star-off-big.png', 10 11 starOn: 'star-on-big.png', 12 13 size:24, 14 15 click: function (score, evt) { 16 17 alert('u selected '+score); 18 19 } 20 21 }); 22 23 </script>
第二種方式可以設置一個隱蔽的HTML元素來保存用戶的選擇值，然后可以在腳本里面通過jQuery選中這個元素來處理該值。
現在在我們的star DIV下面再放一個DIV，用來保存用戶的選擇：
1 <script src="Scripts/jquery.raty.js" type="text/javascript"></script> 2 3 <div id="star"> 4 5 </div> 6 7 <div id="result"> 8 9 </div>
然后在腳本代碼里將這個DIV設置為target，需要注意的是，還要將targetKeep 屬性設置為true，用戶的選擇值才會被保持在目標DIV中，否則只是鼠標懸停時有值，而鼠標離開后這個值就會消失。
1 <script type="text/javascript"> 2 3 $('#star').raty({ 4 5 hints: ['1', '2', '3', '4', '5'], 6 7 path: "Styles/img", 8 9 starOff: 'star-off-big.png', 10 11 starOn: 'star-on-big.png', 12 13 size: 24, 14 15 target: '#result', 16 17 targetKeep : true 18 19 }); 20 21 </script>
現在，用戶的選擇會在下面的DIV中被顯示出來。
但其實我們只是想拿它來暫時存放這個值，並沒想讓它顯示出來，所以可以讓這個DIV一直隱藏，我們通過這個DIV來獲取值並進行我們需要的各種處理，比如送回服務器保存到數據庫等。這里同樣使用彈窗顯示這個值來做例子。跟上面唯一不同就是獲取該值的方式不同。
1 <script type="text/javascript"> 2 3 $("#result").hide();//將保存結果的DIV隱藏 4 5 $('#star').raty({ 6 7 hints: ['1', '2', '3', '4', '5'], 8 9 path: "Styles/img", 10 11 starOff: 'star-off-big.png', 12 13 starOn: 'star-on-big.png', 14 15 size: 24, 16 17 target: '#result', 18 19 targetKeep : true 20 21 }); 22 23 //彈出結果 24 25 var text = $('#result').text(); 26 27 $('img').click(function () { 28 29 if ($('#result').text() != text) { 30 31 alert($('#result').text()); 32 33 return; 34 35 } 36 37 }); 38 39 </script>
這個插件還有很多有趣的功能，大家可以自己去探尋，它強大到真的能滿足你在項目中的各種需求。
本文例子源碼下載：點我
相關連接：
jQuery Raty - A Star Rating Plugin