jquery评分插件jquery.raty.js

所属分类：输入-投票率

79938 378 查看评论 (35)

分享到微信朋友圈

查看演示立即下载

插件描述：一款功能强大的jquery评分插件jquery.raty

使用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);
        }
    });
});

手机移动端图片播放

移动端web端图片轮播