您现在的位置: 首页 > 资讯 > 互联网知识 > 超好用的网站内容或者商品评价评论代码

超好用的网站内容或者商品评价评论代码

互联网知识2022-07-18 16:39:36ddcweb166
基础效果 显示文字 半星效果 自定义内容 自定义长度 只读 自定义主题色 layui.use(['rate'], function(){ var rate = layui.rate; //基础效果 rate.re
基础效果
 
显示文字
 
半星效果
 
 
自定义内容
 
 
自定义长度
 
 
只读
 
自定义主题色
  •  
  •  
  •  
  •  
  •  
需要引入Layui组件
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>基础效果</legend></fieldset>
<div id="test1">&nbsp;</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>显示文字</legend></fieldset>
<div id="test2">&nbsp;</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>半星效果</legend></fieldset>
<div id="test3">&nbsp;</div>
<div>
<div id="test4">&nbsp;</div></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>自定义内容</legend></fieldset>
<div id="test5">&nbsp;</div>
<div>
<div id="test6">&nbsp;</div></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>自定义长度</legend></fieldset>
<div id="test7">&nbsp;</div>
<div>
<div id="test8">&nbsp;</div></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>只读</legend></fieldset>
<div id="test9">&nbsp;</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>自定义主题色</legend></fieldset>
<ul>
    <li>
    <div id="test10">&nbsp;</div></li>
    <li>
    <div id="test11">&nbsp;</div></li>
    <li>
    <div id="test12">&nbsp;</div></li>
    <li>
    <div id="test13">&nbsp;</div></li>
    <li>
    <div id="test14">&nbsp;</div></li>
</ul>
<script>
layui.use(['rate'], function(){
  var rate = layui.rate;
  //基础效果
  rate.render({
    elem: '#test1'
  })
 
  //显示文字
  rate.render({
    elem: '#test2'
    ,value: 2 //初始值
    ,text: true //开启文本
  });
 
  //半星效果
  rate.render({
    elem: '#test3'
    ,value: 2.5 //初始值
    ,half: true //开启半星
  })
  rate.render({
    elem: '#test4'
    ,value: 3.5
    ,half: true
    ,text: true
  })
 
  //自定义文本
  rate.render({
    elem: '#test5'
    ,value: 3
    ,text: true
    ,setText: function(value){ //自定义文本的回调
      var arrs = {
        '1': '极差'
        ,'2': '差'
        ,'3': '中等'
        ,'4': '好'
        ,'5': '极好'
      };
      this.span.text(arrs[value] || ( value + "星"));
    }
  })
  rate.render({
    elem: '#test6'
    ,value: 1.5
    ,half: true
    ,text: true
    ,setText: function(value){
      this.span.text(value);
    }
  })
 
  //自定义长度
  rate.render({
    elem: '#test7'
    ,length: 3
  });
  rate.render({
    elem: '#test8'
    ,length: 10
    ,value: 8 //初始值
  });
 
  //只读
  rate.render({
    elem: '#test9'
    ,value: 4
    ,readonly: true
  });
 
  //主题色
  rate.render({
    elem: '#test10'
    ,value: 3
    ,theme: '#FF8000' //自定义主题色
  });
  rate.render({
    elem: '#test11'
    ,value: 3
    ,theme: '#009688'
  });
 
  rate.render({
    elem: '#test12'
    ,value: 2.5
    ,half: true
    ,theme: '#1E9FFF'
  })
  rate.render({
    elem: '#test13'
    ,value: 2.5
    ,half: true
    ,theme: '#2F4056'
  });
  rate.render({
    elem: '#test14'
    ,value: 2.5
    ,half: true
    ,theme: '#FE0000'
  })
});
</script>
本文标签:
售前咨询
售后咨询
技术咨询
扫一扫

全国免费服务热线
13712877293

返回顶部