一個非常棒的星星評分外掛程式

標籤：

現在做網頁已經不僅限於實現功能了，更多的是要實現功能的同時追求更加美觀的實現。比如頁面上讓使用者評分的功能，你完全可以放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>

 

一個非常棒的星星評分外掛程式