raty

---

强大的评星插件，兼容各版本浏览器

安装

首先下载raty插件

引用

<script src="js/jquery.js"></script>
<script src="js/jquery.raty.min.js"></script>

路径根据你的项目路径更正

Html结构

<div style="width:500px; margin:100px auto;">
  <div class="demo">
    <div id="function-demo" class="target-demo"></div>
    <div id="function-hint" class="hint"></div>
  </div>
</div>

js调用

$(function(){
  $.fn.raty.defaults.path = 'img'; //设置图片路径，即星星图片
  $('#function-demo').raty({
        number: 5, //多少个星星设置
        targetType: 'hint', //类型选择，number是数字值，hint，是设置的数组值
        path: 'img',
        hints: ['差', '一般', '好', '非常好', '全五星'],
        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: '#function-hint',
        cancel: false,
        targetKeep: true,
        targetText: '请选择评分',
        click: function(score, evt) {
            alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
        }
    });
})

更多参数

cancel : false,
cancelHint : ‘cancel this rating!’,
cancelOff : ‘cancel-off.png’,
cancelOn : ‘cancel-on.png’,
cancelPlace : ‘left’,
click : undefined,
half : false,
halfShow : true,
hints : [‘bad’, ‘poor’, ‘regular’, ‘good’, ‘gorgeous’],
iconRange : undefined,
mouseover : undefined,
noRatedMsg : ‘not rated yet’,
number : 5,
path : ‘img/‘,
precision : false,
round : { down: .25, full: .6, up: .76 },
readOnly : false,
score : undefined,
scoreName : ‘score’,
single : false,
size : 16,
space : true,
starHalf : ‘star-half.png’,
starOff : ‘star-off.png’,
starOn : ‘star-on.png’,
target : undefined,
targetFormat : ‘{score}’,
targetKeep : false,
targetText : ‘’,
targetType : ‘hint’,
width : undefined

改变样式

做一组图片，放在img下，对应图片的引用路径即可

赏

谢谢你请我吃糖果