一個非常棒的星星評分插件

現在做網頁已經不僅限於實現功能了，更多的是要實現功能的同時追求更加美觀的實現。比如頁面上讓用戶評分的功能，你完全可以放5個RdioButton讓用戶選擇分數，也可以用DropDownList來實現，但那樣不如用五個星星來得炫來得直觀。

 

 

　　像這樣的星星評分插件用得非常普遍，幾乎要成為你隨手捻來的小菜，任何一個不具備使用這樣插件的前端程序員都是毫無戰斗力的。

　　這里給大家介紹一個實現這樣的評分效果的小插件jQuery Raty。它提供的API相當豐富真的是讓人愛不釋手。詳細文檔及下載插件請移步這里。

基本使用

　　下面我們來實際操作，運用一下這個有愛的小插件。

　　需要做的事情非常簡單，在頁面上放一個DIV，id取名為‘star’或者什么的隨你所以愛，用來顯示我們的評分插件。

 

<div id="star"></div>

當然，記得把下載下來的jquery.raty.js或者jquery.raty.min.js放在項目文件夾當中。同時，由於是基於jQuery的，所以包含jQuery的腳本文件那是必需的。這三個腳本文件都可以在下載后的壓縮包內的js文件夾內找到。直接復制到你的項目相應目錄中即可。

 

 

　　然后，在頁面中用<Script>標簽將剛才的腳本引進頁面當中。

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.raty.js" type="text/javascript"></script>

現在，只需一句代碼就可以實現評分了。在頁面添加如下語句：

<script type="text/javascript">
 
        $('#star').raty();
 
      </script>

運行我們的網站程序來看一下效果。

 

 

　　沒出現星星不說，排版還一團亂。但看到這個情形，我們應該知道是缺少相應的圖片或者CSS樣式表。將壓縮包內的img文件夾復制到項目中，就應該能解決圖片缺失的問題了。

 

　　需要注意的就是圖片路徑問題，默認它會在根目錄打img文件夾中的圖片，如果你需要將圖片放到其他地方，需要在代碼中指定，這在后面介紹。

　　刷新頁面看效果：

 

　　圖片是出來了，排版還是亂的，而且有HTML符號&#160沒有被正確解析。這個符號代表空格，對應着&nbsp，這里應該是腳本里面的問題。所以這里提出一個使用這個插件需要注意的地方：jQuery要求1.5及以上版本。如果你一開始用的不是1.4的版本，恭喜你你不會出現這里的問題。

　　現在將jQuery換掉：

 

　　同時修改頁面當中的引用。

<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>

現在刷新頁面查看效果，一切正常了。

 

指定圖標

　　上面介紹的是基本的使用，這個插件最讓人喜愛的地方在於他提供了非常多的API供我們自定義，實現一些我們想要的功能和效果。

　　通過定義path屬性可以指定我們要使用的圖標的位置。現在我們將項目中的img文件夾移到其他地方，比如這里我把它移到Styles文件夾下：

 

　　然后刷新頁面，同樣會出現找不圖片的錯誤，這時候，在腳本里面設置一下path屬性：

<script type="text/javascript">

       $('#star').raty({

           path:"Styles/img"

       });

   </script>

 

再去刷新頁面效果又出來了，並且我們可以通過查看頁面的源碼發現，圖片的調用確實是我們指定的地方：

 

 

　　我們可以使用自定義的圖標，也可以使用其他自帶的圖標，壓縮包內可以找到更大的星星圖標，以及勛章笑臉圖標等。

　　現在將doc文件夾img文件夾內的所以有圖標復制到我們項目中的img文件夾中來。更改圖標通過插件的starOff和starOn屬性。

　　下面將圖標換成大的：

<script type="text/javascript">

       $('#star').raty({

           path:"Styles/img",

           starOff: 'star-off-big.png',

           starOn: 'star-on-big.png'

       });

   </script>

只需寫上相應圖標的文件名即可，如果要使用勛章則應該是medal-on.png和medal-off.png，現在刷新頁面看效果，有點不理想：

 

　　星星沒有排成一排了，擠了兩個下去。是不是很奇怪。查看一下頁面代碼，發現包含我們raty插件的那個DIV被加了個width：100px樣式。

 

　　可我們並沒有給DIV設置任何樣式啊，這只能是插件的腳本自己設置的。因為在小星星時，100的寬度剛好，現在換在大星星了一排的位置不夠了所以被擠了兩個下去。這里需要通過size屬性來設置一下寬度從而將五個大星星重新顯示到一排來：

<script type="text/javascript">

       $('#star').raty({

           path:"Styles/img",

           starOff: 'star-off-big.png',

           starOn: 'star-on-big.png',

           size:24

       });

   </script>