jquery评分插件jquery.raty.js

所属分类:输入-投票率

 66041  328  查看评论 (33)
分享到微信朋友圈
X
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);
        }
    });
});


相关插件-投票率

jquery打分评星级效果

jquery打分评星级效果
  投票率
 28930  335

jQuery五角星评分

鼠标移上去能显示评分,代码简单13行搞定。
  投票率
 27053  252

CSS3+SVG评星效果

没有任何js代码实现的,表情星星打分效果
  投票率
 9545  173

jQuery实现淘宝打星评价

jQuery实现淘宝打星评价直接引用即可
  投票率
 32993  299

讨论这个项目(33)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    DW 0
    2020/9/27 15:58:55
    pc端不可以用吗
    图片路径怎么改 都不对
    回复
    18663891838 0
    2019/1/28 13:22:51
    列表中使用怎么处理呢,鼠标经过全部都是一个值
        ThinkYu0
        2019/11/14 14:00:32
        发大水
    回复
    起点~终点 0
    2018/2/28 10:09:39
    为什么下载不了
    回复
    894327391 0
    2018/2/5 18:05:30
    孝道 0
    2018/1/29 10:48:33

    谁知道这个插件怎么一颗星改成两分吗?

    回复
    htfvb 0
    2018/1/10 11:36:07

    为什么显示defaults未定义,都引进来了啊

    回复
    berys 0
    2017/12/1 15:58:19

    size不起作用,有人知道为什么吗?

        ?????肉0
        2018/11/23 13:02:19
        raty.js中找到_createStars函数,在创建img标签是添加css样式width=size
        $('<img />', { src: icon, alt: i,width:this.opt.size, title: title, value: value }).appendTo(this);
    回复
    magic67614290 0
    2017/11/19 1:01:40

    感觉这个插件很棒

        8943273910
        2018/2/5 18:06:08

        但是需要jQuery币

        起点~终点0
        2018/2/28 10:10:20
        怎么才能有jq币
    回复
    ?ふ嗵 0
    2017/11/15 11:55:25

    这个怎么样

        htfvb0
        2018/1/8 18:09:11

        很好用

    回复
    hd面具人生 0
    2017/11/10 13:31:08

    下载后怎么没有星星了呢?

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复