Rate 评星

简介

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

特点

axRate评星功能如下：

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

运行条件

页面引入ax.css和ax.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>

最新版本为v1.0.4，点击这里可直接下载该插件。

使用方法

插件运行方式有三种：

ax*属性：对ax-rate标签使用axRate属性即可按默认参数运行插件。
ax*属性：对type=hidden/text的input标签使用axRate属性即可按默认参数运行插件。
js实例：通过new axRate('#id',{参数})方式创建实例运行。

HTML JS

                                            <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，通过长需要自定义结果展示格式，通过该参数自定义自己的结果格式，默认格式是星,总分:

popShow:设置是否显示星星的气泡小窗，默认false不显示，可选择true显示

popFormat:设置popShow则可能需要自定义气泡内容，通过该参数自定义自己的结果格式，默认格式是星,总分:
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节点

HTML JS

                                            <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为预设的分值。

HTML JS

                                <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('清空了');
                                            }

监听事件

本插件有若干监听方法，以on为关键字，实例后监听和在参数中监听效果相同。格式是：instance.on('event',function(){})；具体事件说明如下：

getValue 获取值的时候执行，支持两个参数

value:当前值
stars:当前星星数量

setValue 设置值的时候执行，支持两个参数

value:当前值
stars:当前星星数量

rendered 根据参数创建评星节点后执行，无参数

演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。

HTML JS

                                            <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',{
        insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
        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: '', //回调函数，设置值时执行，支持两个参数：当前值和当前星星数量
        breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
      });
});

以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"