jQuery插件之-jQuery Raty星级评分

在一些互动性比较多的网站上，我们很多时候会碰到星级评分。jQuery插件jQuery Raty就是用来自动生成可定制的星级评分。它支持自定义图标，创建各种评级组合，图标数量和注释，还支持点击时绑定回调函数。

插件基本用法：

$('#default').raty();
<div id="default"></div>

效果图：

基本用法

只读用法：

$('#fixed').raty({
  readOnly:  true,
  start:     2
});
<div id="fixed"></div>

效果图：

只读用法

自定义图标用法：

$('#icon').raty({
hintList:  ['a', '', null, 'd', '5'],
starOn:    'medal-on.png',
starOff:   'medal-off.png'
});

<div id="icon"></div>

效果图：

自定义图标

自定义事件用法：

$('#click').raty({
  onClick: function(score) {
    alert('score: ' + score);
  }
});
<div id="click"></div>

效果图：

自定义事件

半星用法：

$('#half').raty({
  start:     3.3,
  showHalf:  true
});
<div id="half"></div>

半星

带有取消功能和触发事件的用法：

$('#cancel-custom').raty({
cancelHint:   'remove my rating!',
cancelPlace:  'right',
showCancel:   true
onClick: function(score) {
alert('score: ' + score);
}
});

<div id="cancel-custom"></div>

插件所有参数如下：

cancelHint:   'cancel this rating!'
The hint information.
cancelOff:    'cancel-off.png'
Name of the cancel image off.
cancelOn:     'cancel-on.png'
Name of the cancel image on.
cancelPlace:  'left'
Position of the cancel button.
hintList:     ['bad', 'poor', 'regular', 'good', 'gorgeous']
List of names that will be used as a hint on each star.
number:       5
Number of stars that will be presented.
path:         'img/'
Path where are the images of the stars.
readOnly:     false
If the stars will be read-only.
scoreName:    'score'
Name of the hidden field that holds the score value.
showCancel:   false
If will be showed a button to cancel the rating.
showHalf:     false
If will show half star if come a float number as score.
starHalf:     'star-half.png'
The name of the half star image.
start:        0
Number of stars to be selected.
starOff:      'star-off.png'
Name of the star image off.
starOn:       'star-on.png'
Name of the star image on.
//onClick:    function() { alert('clicked!'); }
Function that returns the selected value.

目前插件最新版是 0.5。
官方下载地址：http://github.com/downloads/wbotelhos/raty/jquery.raty-0.5.zip