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/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/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/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/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/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>