jquery评分插件jquery.raty.js

所属分类:输入-投票率

 14065  70  查看评论 (14)
jquery评分插件jquery.raty.js ie兼容6

使用jQuery Raty,可以很方便的在页面上嵌入一个评分组件

使用方法很简单

引用以下文件

<script type="text/javascript" src="demo/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/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 class="demo">
    <div id="function-demo1" class="target-demo"></div>
    <div id="function-hint1" class="hint"></div>
  </div>
</div>

js调用方法

$(function() {
    $.fn.raty.defaults.path = 'lib/img';
    $('#function-demo').raty({
        number: 5, //多少个星星设置
        targetType: 'hint', //类型选择,number是数字值,hint,是设置的数组值
        path: 'demo/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);
        }
    });
    $('#function-demo1').raty({
        number: 10, //多少个星星设置
        score: 2, //初始值是设置
        targetType: 'number', //类型选择,number是数字值,hint,是设置的数组值
        path: 'demo/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: '#function-hint1',
        cancel: false,
        targetKeep: true,
        precision: false, //是否包含小数
        click: function(score, evt) {
            alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
        }
    });
});


相关插件-投票率

多种CSS3动画效果星级评分特效

css3动画实现效果星级评分
  投票率
 8145  97

jquery星星评分插件Bootstrap Star Rating

Bootstrap Star Rating是一个简单而强大的jQuery插件实现星级分数评级。
  投票率
 96336  91

Ratyli简单的jQuery星级评分插件

Ratyli是一款简单实用的jQuery星级评分插件。该星级评分插件使用简单,不需要额外的CSS样式,并且可以和Font Awesome字体图标集合使用。
  投票率
 4712  28

jquery小星评级系统代码

jquery小星评级系统代码
  投票率
 5637  33

讨论这个项目(14)回答他人问题或分享插件使用方法奖励jQ币

    右手边的阳光 0
    2017/6/20 17:18:45
    深蓝伏特加 0
    2017/6/19 10:18:42

    是啊,这个确实集成简单,也不会发生冲突,不错,就喜欢这种简洁的又使用感觉相当好的插件,不喜欢那种代码写得很繁锁,假装B格很高

    回复
    Divintiate 0
    2017/5/24 11:16:57
    这个插件还不错 回复
    随风起航 0
    2017/4/3 17:37:30

    好用,但要钱就先不下了

    回复
    糊涂书生 0
    2017/4/1 13:18:23
    ??小阿卷?? 0
    2017/2/10 10:55:47

    怎么做半星的效果呢

    回复
    SiriBen 1
    2017/2/5 14:55:09

    嗯,这个确实集成简单,也不会发生冲突,不错,就喜欢这种简洁的又使用感觉相当好的插件,不喜欢那种代码写得很繁锁,假装B格很高

    回复
    koko78419 0
    2016/9/2 10:09:25
    好用的插件
        zz1861070
        2016/11/10 19:11:53
        确实好用
    回复
    Mr.Y 0
    2016/7/22 13:07:54
    用起来还蛮方便的 回复
    xiaolinsean 0
    2016/5/30 20:05:33
    简单易懂,用起来很方便 回复
取消回复