Rate 评星

简介

评星功能并不是网站必须的插件,但是在商城或留言评论中经常见到星级评价,我们基于AXUI开发了axRate评星插件,其能满足绝大多数评星常见需求。

特点

axRate评星功能如下:

  • 1、支持全星和半星评价
  • 2、支持自定义评星级别
  • 3、支持设定每一级评星的得分
  • 4、可通过内部变量获取评星数量和最终得分
  • 5、支持对每个星星气泡显示星星数量和得分
  • 6、支持清除当前星星数量和得分
  • 7、支持三种尺寸的星星,分别是sm、md和lg
  • 8、支持只读模式,也就是只展示星星数量和得分,不可点击操作
  • 9、支持回调和监听

运行条件

页面引入ax.cssax.js之后还需引入以下文件。

点击这里可直接下载该插件。

                                <link href="https://src.axui.cn/v2.0/v2.0/dist/plugins/axRate/ax-rate.css" rel="stylesheet" type="text/css">
                                <script src="https://src.axui.cn/v2.0/v2.0/dist/plugins/axRate/axRate.js" type="text/javascript"></script>
                            

使用方法

插件运行方式有三种:

  • ax*属性:对ax-rate标签使用axRate属性即可按默认参数运行插件。
  • ax*属性:对type=hidden/text的input标签使用axRate属性即可按默认参数运行插件。
  • js实例:通过new axRate('#id',{参数})方式创建实例运行。
  •                                             <div class="ax-rate" axRate></div>
    
                                                <div class="ax-break"></div>
    
                                                <input type="text" readonly axRate>
    
                                                <div class="ax-break"></div>
            
                                                <div class="ax-rate" id="jsIns"></div>
                                        
  •                                             let jsIns = new axRate('#jsIns');
                            

常用方法

通过控制axRate的参数可实现市面上常见的评星效果。

  • half:设置是否允许半星,默认false,可选择true显示半星
  • count:设置星星数量,默认是5,可自定义数字
    • multiplier:相对count参数,该参数是定义每个星星等于的值,默认是1,如果是5星并且该值是2,则满分就是10
  • tipsShow:设置显示评星结果,默认false不显示,可选择true在评星右侧显示
    • tipsFormat:设置了tipsShow,通过长需要自定义结果展示格式,通过该参数自定义自己的结果格式,默认格式是<i stars></i>星,总分:<i value></i>
  • popShow:设置是否显示星星的气泡小窗,默认false不显示,可选择true显示
    • popFormat:设置popShow则可能需要自定义气泡内容,通过该参数自定义自己的结果格式,默认格式是<i stars></i>星,总分:<i value></i>
    • popTheme:气泡的风格来自axTooltip,所以可以使用相同的风格设定,默认是ad,如果需要自定义风格请参考axTooltip的风格
                                    <div class="ax-row ax-split">
                                        <div class="ax-col ax-col-8">
                                            <div class="ax-rate" axRate='half:true'></div>
                                        </div>
                                        <div class="ax-col ax-col-8">
                                            <div class="ax-rate" axRate='count:10'></div>
                                        </div>
                                        <div class="ax-col ax-col-8">
                                            <div class="ax-rate" axRate='tipsShow:true'></div>
                                        </div>

                                    </div>
                                    <div class="ax-break"></div>
                                    <div class="ax-row ax-split">
                                        <div class="ax-col ax-col-8">
                                            <div class="ax-rate" axRate='popShow:true'></div>
                                        </div>
                                        <div class="ax-col ax-col-8">
                                            <div class="ax-rate" axRate='popShow:true,popTheme:"dark"'></div>
                                        </div>
                                        <div class="ax-col ax-col-8">
                                            <div class="ax-rate" axRate='tipsShow:true,multiplier:2'></div>
                                        </div>
                                    </div>
                                

尺寸

使用siez参数定义星星尺寸,支持三种尺寸:

  • sm:大小为18px的星星,默认尺寸
  • md:大小为28px的星星
  • lg:大小为38px的星星
                            <div class="ax-row ax-split">
                                <div class="ax-col ax-col-8">
                                    <div class="ax-rate" axRate></div>
                                </div>
                                <div class="ax-col ax-col-8">
                                    <div class="ax-rate" axRate='size:"md"'></div>
                                </div>
                                <div class="ax-col ax-col-8">
                                    <div class="ax-rate" axRate='size:"lg"'></div>
                                </div>
                            </div>
                                

只读显示

使用readonly参数让评星只显示得分和评星结果,禁止点击操作,该参数需要参数value配合,该value表示让几个星星高亮。

注意value=星星个数(count)*每个星星的分数(multiplier)。

如果multiplier=1,在half为false清空下,value只能大于等于0并且小于等于总星星数量,而且要求是整数;如果half为true,那么value可以使用诸如1.5、2.5等小数。

                            <div class="ax-row ax-split">
                                <div class="ax-col ax-col-8">
                                    <div class="ax-rate" axRate='readonly:true,value:2'></div>
                                </div>
                                <div class="ax-col ax-col-8">
                                    <div class="ax-rate" axRate='readonly:true,value:3.5,half:true'></div>
                                </div>
                                <div class="ax-col ax-col-8">
                                    <div class="ax-rate" axRate='readonly:true,multiplier:2,value:9,half:true'></div>
                                </div>
                            </div>
                            

自定义图标

评星的图标默认是五角星,对于个性网站可以通过icon参数定义自己的评星图标。该参数默认是ax-iconfont ax-icon-star-f

                            <div class="ax-row ax-split">
                                <div class="ax-col ax-col-8">
                                    <div class="ax-rate" axRate='icon:"ax-iconfont ax-icon-star"'></div>
                                </div>
                                <div class="ax-col ax-col-8">
                                    <div class="ax-rate" axRate='icon:"ax-iconfont ax-icon-good-f"'></div>
                                </div>
                                <div class="ax-col ax-col-8">
                                    <div class="ax-rate" axRate='icon:"ax-iconfont ax-icon-gift-f"'></div>
                                </div>
                            </div>
                            

与表单结合使用

ax-form-group表单中,对ax-rate父层使用ax-align-left-center来优化评星布局。本例启用了clearShow=true

姓名:
评论内容:
评分:
                                <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-form-con">
                                            <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-form-con ax-align-left-center">
                                            <div class="ax-rate" axRate='tipsShow:true,popShow:true,clearShow:true,half:true'></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-primary ax-full">提交button</button></div>
                                        </div>
                                    </div>
                                </div>
                                

内置成员变量

axRate内置若干内部成员变量,以便于回调和监听函数使用。

  • this.starts:当前星星数量
  • this.value:当前评分
  • this.items:星星dom节点数组
  • this.tips:评星结果dom节点
  • this.ul:星星父节点数组
  • this.clear:清除按钮dom节点
  • this.targetDom:ax-rate最外围dom节点
  •                                             <div class="ax-rate" id="member"></div>
                                                <div class="ax-break"></div>
                                                <button type="button" class="ax-btn" id="getMember">获取变量</button>
                                                    
  •                                             let memIns = new axRate('#member', {
                                                    popShow: true,
                                                    tipsShow: true,
                                                    half: true,
                                                }),
                                                    memBtn = document.querySelector('#getMember');
                                                memBtn.onclick = function () {
                                                    console.log('共有' + memIns.stars + '个星星,' + memIns.value + '分');
                                                }
                            

操作方法

axRate内置若干操作方法,以便于第三方组件对评星插件进行操作。请使用f12打开控制台查看操作结果。

  • this.get(attr):获取评星插件的相关内容,返回的是一个对象,通过使用attr参数获取相应的值,attr可使用的值如下:
    • stars:获得星星数量
    • value:获得评星得分
    • count:获得星星总数,等同于参数中的count值
    • multiplier:获得单个星星的分数,等同于参数中的multiplier值
  • this.set(val):设置评星的星星和分值,val为预设的分值。
  •                                 <div class="ax-rate" id="method"></div>
                                    <div class="ax-break"></div>
                                    <button type="button" class="ax-btn" id="getMethod">get方法</button>
                                    <button type="button" class="ax-btn" id="setMethod">set方法</button>
                                    <button type="button" class="ax-btn" id="clearMethod">清零</button>
                                
  •                                             //操作方法
                                                let metIns = new axRate('#method', {
                                                    popShow: true,
                                                    tipsShow: true,
                                                    half: true,
                                                }),
                                                    getBtn = document.querySelector('#getMethod'),
                                                    setBtn = document.querySelector('#setMethod'),
                                                    clearBtn = document.querySelector('#clearMethod');
                                                getBtn.onclick = function () {
                                                    let stars = metIns.get('stars');
                                                    console.log(stars + '个星星');
                                                }
                                                setBtn.onclick = function () {
                                                    metIns.set(3);
                                                    console.log('设置值为3');
                                                }
                                                clearBtn.onclick = function () {
                                                    metIns.set(0);
                                                    console.log('清空了');
                                                }
                            

监听事件

借鉴jQuery的写法,本插件有若干监听方法,格式是:instance.on('event',function(){});具体事件说明如下:

  • getValue 获取值的时候执行,支持两个参数
    • value:当前值
    • stars:当前星星数量
  • setValue 设置值的时候执行,支持两个参数
    • value:当前值
    • stars:当前星星数量
  • rendered 根据参数创建评星节点后执行,无参数

演示实例使用console方法,请用F12打开浏览器控制台查看监听结果。

  •                                             <div class="ax-rate" id="listen"></div>
                                            
  •                                             let listenIns = new axRate('#listen', {
                                                    popShow: true,
                                                    tipsShow: true,
                                                    half: true,
                                                    rendered:function(){
                                                        console.log('节点渲染完毕!');
                                                    }
                                                });
                                                listenIns.on('getValue', function (value, stars) {
                                                    console.log('成功获取!,当前得分:' + value + ',当前星星数:' + stars);
                                                }).on('setValue', function (value, stars) {
                                                    console.log('成功设置!,当前得分:' + value + ',当前星星数:' + stars);
                                                });
                                            

参数选项

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axRate('#id',{
        half: false, //是否支持半星选择,默认false不支持,可选择true支持
        icon: 'ax-iconfont ax-icon-star-f', //图标className
        count: 5, //评星总数,默认5星
        multiplier: 1, //1个星星代表的分数
        value: 0, //初始化当前星级评分,默认为0,值小于等于count*multiplier
        readonly: false, //是否是只读模式,默认为false,可选择true只读(只展示不可操作)

        popShow: false, //是否显示星星节点气泡,默认false不显示,可选择true显示
        popTheme: 'ad', //气泡风格,与axTooltip的theme参数一致
        popFormat: '<i stars></i>星,总分:<i value></i>', //显示气泡的内容格式,

        tipsShow: false, //是否在末尾显示得分,默认false不显示,可选择true显示
        tipsFormat: '<i stars></i>星,总分:<i value></i>', //显示末尾得分文本格式,

        clearShow: false, //是否显示清楚星星按钮,默认false不显示,可选择true显示

        size: '',//星星尺寸,有三种尺寸18px的sm,28px的md和38px的lg,默认是sm

        rendered: '', //回调函数,初始化生成节点时执行
        getValue: '', //回调函数,获得值时执行,支持两个参数:当前值和当前星星数量
        setValue: '', //回调函数,设置值时执行,支持两个参数:当前值和当前星星数量
      });
});