zoukankan      html  css  js  c++  java
  • 【Layui】12 评分 Rate

    文档地址:

    https://www.layui.com/demo/rate.html

    基础样式:

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>基础效果</legend>
    </fieldset>
    
    <div id="test1"></div>
    
    <script>
        layui.use('rate',function () {
            let rate = layui.rate;
            //基础效果
            rate.render({
                elem: '#test1'
            });
        });
    </script>

    可以根据鼠标点击评分星号图标

    相关样式属性:

    设定初始值:

    value: 2 //初始值

    开启文本显示:

    text: true //开启文本

    开启半分评星:

    half: true //开启半星

    设定自定义文本:

    text: true,
    setText: function(value){ //自定义文本的回调
          var arrs = {
            '1': '极差'
            ,'2': '差'
            ,'3': '中等'
            ,'4': '好'
            ,'5': '极好'
    };
    this.span.text(arrs[value] || ( value + "星"));

    半星自定义文本:

    要注意的是,半星设置自定义他的步长就是0.5

    half: true,
    text: true,
    setText: function(value){
    this.span.text(value);
    }

    评分长度自定义:

    就是设置总共几颗星

    length: 3

    设置只读属性:

    评分将不可改变,仅浏览用

    readonly: true

    评分颜色设置:

    直接调用主题色

    theme: '#FF8000' //自定义主题色

  • 相关阅读:
    第09组(71) Alpha冲刺 (3/6)
    第09组 Alpha冲刺 (2/6)
    第09组 Alpha冲刺 (1/6)
    第09组(71)需求分析报告
    第07组 Beta冲刺(1/5)
    第07组 Alpha冲刺 总结
    第07组 Alpha冲刺 (6/6)
    第07组 Alpha冲刺 (5/6)
    第五次作业
    第07组 Alpha冲刺 (4/6)
  • 原文地址:https://www.cnblogs.com/mindzone/p/13407731.html
Copyright © 2011-2022 走看看