在一些互动性比较多的网站上,我们很多时候会碰到星级评分。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