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' //自定义主题色

  • 相关阅读:
    在linux下Ant的环境配置
    在linux下Java的环境配置
    CSS列表逆序
    HTML元素基础学习
    第一天---HTML基础学习
    排球计分程序
    罗辑思维:怎样成为一个高手 观后感
    十八周个人作业
    本周个人作业
    个人作业
  • 原文地址:https://www.cnblogs.com/mindzone/p/13407731.html
Copyright © 2011-2022 走看看