jRate是一款基於SVG的 Jquery 星級評分外掛。jRate能夠透過引數設定來提供各種實用的評分功能。
線上演示 下載
基本使用
在頁面中引入jQuery和jRate.js檔案。
<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jRate.js"></script> |
html結構：
<div id="jRate"></div> |
然後按下面方法呼叫外掛：
$("#jRate").jRate(); |
BOWER
bower install jqthumb |
高階特性
設定評分星星的開始顏色和結束顏色
可以設定你喜歡的評分星星的開始顏色和結束顏色。顏色的取值可以是hex值、rgb值或標準的顏色名字。可以為評分條只提供一種同樣的顏色。
$("#jRate").jRate({ startColor: "cyan", endColor: "blue"}); |
初始值
可以為已評分星星個數提供初始值。
$("#jRate").jRate({ rating:2}); |
寬度和高度設定
可以自定義評分星星的寬度和高度。
$("#jRate").jRate({ width: 70, height: 70}); |
評分圖案
可以從可用的選項圖型列表中選擇評分圖案。目前可用的圖案有：STAR, RECTANGLE, SQUARE, CIRCLE, RHOMBUS, TRIANGLE。
$("#jRate").jRate({ shape: 'RHOMBUS'}); |
可增長的寬度和高度
使用growth欄位可以使評分圖形由小到大變化。
$("#jRate").jRate({ widthGrowth: 0.2, heightGrowth: 0.2}); |
計數
評分圖形的數量由 count 屬性決定。可以自定義它的數量。
$("#jRate").jRate({ count: 10}); |
背景顏色
可以使用hex值、rgb值和標準的顏色名字來設定背景顏色。
$("#jRate").jRate({ backgroundColor: 'black'}); |
描邊顏色
可以設定評分圖案的描邊顏色。
$("#jRate").jRate({ strokeColor: 'black'}); |
間隙
可以設定兩個圖形之間的間隙。
$("#jRate").jRate({ shapeGap: '10px'}); |
透明度
可以設定評分圖案的透明度。
$("#jRate").jRate({ opacity: 0.3}); |
最大值和最小值
可以設定所需的最大值和最小值。
$("#jRate").jRate({ min: 10, max: 15}); |
精度
可以設定需要的精度值。
$("#jRate").jRate({ precision: 0}); |
方向
可以透過布林值來設定方向是水平的還是垂直的。也可以設定false來進行兩個方向的交換。
$("#jRate").jRate({ horizontal: false}); |
反向
可以透過布林值來設定是否反向顯示。
$("#jRate").jRate({ reverse: true}); |
只讀
可以將評分設定為只讀模式。
$("#jRate").jRate({ readOnly: true}); |
onChange
當評分值改變時的一個回撥函式。
$("#jRate").jRate({ onChange: function(rating) { $('#demo-onchange-value').text("Your Rating: "+rating); }}); |
onSet
當評分星星被點選或設定是的回撥函式。
$("#jRate").jRate({ onSet: function(rating) { $('#demo-onset-value').text("Selected Rating: "+rating); }}); |