Rate 评星

Raty介绍 PLUGIN

Raty是非常强大的评星插件，在Github上很受欢迎，作者通过许多实例进行了详实的讲解，详细使用方法见Github。

本插件支持自定义五星图片，支持使用iconfont字体作为五星图片，为了保持多终端显示效果，本框架推荐使用iconfont作为五星图片，为此本框架在v2.9.0基础上新增了几个属性：

canceloffClass 清除按钮未选择样式
cancelonClass 清除按钮已选择样式
starhalfClass 半星样式
staroffClass 未选择样式
staronClass 已选择样式
spaceHtml 五星间隔，默认是<span class="ax-break"></span>

<script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/raty/jquery.raty.min.js""></script>
<script type='text/javascript'>
    $(document).ready(function () {
$('#raty01').raty();
        $('#raty02').raty({
            readOnly: true,
            score: 3
        });
        $('#raty03').raty({
            number: 10,
            score: 3,
            target       : '#hint03',
            targetFormat : '我打{score}分',
            targetKeep : true,
            targetType : 'score'
        });
        $('#raty05').raty({
            score: 2.5,
            precision  : true,
            cancel     : true,
        });
        $('#raty06').raty({
            half     : true,
            score: 2.5,
            precision  : true,
            cancel     : true,
            space:false,
        });
    });
</script>

                                <div class="ax-rate"><div class="ax-inner" id="raty01"></div></div>
                                <div class="ax-break"></div>
                                <div class="ax-rate"><div class="ax-inner" id="raty02"></div></div>
                                <div class="ax-break"></div>
                                <div class="ax-rate"><div class="ax-inner" id="raty03"></div><span class="ax-score" id="hint03"></span></div>
                                <div class="ax-break"></div>
                                <div class="ax-rate"><div class="ax-inner" id="raty05"></div></div>
                                <div class="ax-break"></div>
                                <div class="ax-rate"><div class="ax-inner" id="raty06"></div></div>

自定义图片

通过使用iconRange属性定义每个级别的星级图片。

<script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="src="https://src.axui.cn/v1.0/src/plugins/raty/jquery.raty.min.js""></script>
<script type='text/javascript'>
    $(document).ready(function () {
        $('#raty04').raty({
            number:8,
            single: true,
            starType:     'img',
            path:  'examples/images/',
            iconRange: [
                { range: 1, on: 'face01.png', off: 'face01-off.png' },
                { range: 2, on: 'face02.png', off: 'face02-off.png' },
                { range: 3, on: 'face03.png', off: 'face03-off.png' },
                { range: 4, on: 'face04.png', off: 'face04-off.png' },
                { range: 5, on: 'face05.png', off: 'face05-off.png' },
                { range: 6, on: 'face06.png', off: 'face06-off.png' },
                { range: 7, on: 'face07.png', off: 'face07-off.png' },
                { range: 8, on: 'face08.png', off: 'face08-off.png' },
            ],
            hints: ['痛苦', '揪心', '愤怒', '难过', '微笑', '满意', '喜欢', '开心'],
            target       : '#hint04',
            targetFormat : '我的评论: {score}',
            targetKeep : true,
            cancel     : true,
            starOff:   'face05-off.png',
            cancelOff:    'cancel-off.png',
            cancelOn:     'cancel.png',
        });
    });
</script>

                                <div class="ax-rate"><div class="ax-inner" id="raty04"></div><span class="ax-score" id="hint04"></span></div>

中等尺寸

使用ax-md定义中等尺寸适合行高38px的行文。

<script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="src="https://src.axui.cn/v1.0/src/plugins/raty/jquery.raty.min.js""></script>
<script type='text/javascript'>
    $(document).ready(function () {
    $('#raty07').raty();
     $('#raty08').raty({
                number:8,
                single: true,
                starType:     'img',
                path:  'examples/images/',
                iconRange: [
                    { range: 1, on: 'face01.png', off: 'face01-off.png' },
                    { range: 2, on: 'face02.png', off: 'face02-off.png' },
                    { range: 3, on: 'face03.png', off: 'face03-off.png' },
                    { range: 4, on: 'face04.png', off: 'face04-off.png' },
                    { range: 5, on: 'face05.png', off: 'face05-off.png' },
                    { range: 6, on: 'face06.png', off: 'face06-off.png' },
                    { range: 7, on: 'face07.png', off: 'face07-off.png' },
                    { range: 8, on: 'face08.png', off: 'face08-off.png' },
                ],
                hints: ['痛苦', '揪心', '愤怒', '难过', '微笑', '满意', '喜欢', '开心'],
        }
        );
    });
</script>

                                <div class="ax-rate ax-md"><div class="ax-inner" id="raty07"></div></div>
                                <div class="ax-break"></div>
                                <div class="ax-rate ax-md"><div class="ax-inner" id="raty08"></div></div>

大尺寸

使用ax-lg定义中等尺寸适合行高58px的行文。

<script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="src="https://src.axui.cn/v1.0/src/plugins/raty/jquery.raty.min.js""></script>
<script type='text/javascript'>
    $(document).ready(function () {
    $('#raty09').raty();
     $('#raty10').raty({
                number:8,
                single: true,
                starType:     'img',
                path:  'examples/images/',
                iconRange: [
                    { range: 1, on: 'face01.png', off: 'face01-off.png' },
                    { range: 2, on: 'face02.png', off: 'face02-off.png' },
                    { range: 3, on: 'face03.png', off: 'face03-off.png' },
                    { range: 4, on: 'face04.png', off: 'face04-off.png' },
                    { range: 5, on: 'face05.png', off: 'face05-off.png' },
                    { range: 6, on: 'face06.png', off: 'face06-off.png' },
                    { range: 7, on: 'face07.png', off: 'face07-off.png' },
                    { range: 8, on: 'face08.png', off: 'face08-off.png' },
                ],
                hints: ['痛苦', '揪心', '愤怒', '难过', '微笑', '满意', '喜欢', '开心'],
        }
        );
    });
</script>

                                <div class="ax-rate ax-lg"><div class="ax-inner" id="raty09"></div></div>
                                <div class="ax-break"></div>
                                <div class="ax-rate ax-lg"><div class="ax-inner" id="raty10"></div></div>

与表单结合使用

在ax-form-group表单中使用ax-rate已经做了优化处理。

姓名：

评论内容：

评分：

<script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="src="https://src.axui.cn/v1.0/src/plugins/raty/jquery.raty.min.js""></script>
<script type='text/javascript'>
    $(document).ready(function () {
    $('#raty11').raty();
    });
</script>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">姓名：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">评论内容：</div>
                                        <div class="ax-flex-block">
                                            <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="输入评论"></textarea></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">评分：</div>
                                        <div class="ax-flex-block">
                                            <div class="ax-rate"><div class="ax-inner" id="raty11"></div></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label"></div>
                                        <div class="ax-flex-block">
                                            <div class="ax-form-input"><button type="button" class="ax-btn ax-btn-primary ax-btn-full">提交button</button></div>
                                        </div>
                                    </div>
                                </div>