使用jQuery Raty,可以很方便的在页面上实现一个评分功能
1、效果图如下:
2、插件下载地址:
GitHub - wbotelhos/raty: :star2: Raty - A Star Rating Plugin
3、使用方法:
引入js
<
script
type
=
"text/javascript"
src
=
"js/jquery.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"js/jquery.raty.min.js"
></
script
>
html代码:
<div class="demo">
<div id="demo1" class="target-demo"></div>
<div id="hint1" class="hint"></div>
</div>
js代码:
$(function() {
$('#demo1').raty({
number: 10, //多少个星星设置
score: 2, //初始值是设置
targetType: 'number', //类型选择,number是数字值,hint,是设置的数组值
path: '/img', #改为自己的路径
cancelOff: 'cancel-off-big.png',
cancelOn: 'cancel-on-big.png',
size: 24,
starHalf: 'star-half-big.png',
starOff: 'star-off-big.png',
starOn: 'star-on-big.png',
target: '#hint1',
cancel: false,
targetKeep: true,
precision: false, //是否包含小数
click: function(score, evt) {
alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
}
});
});